vue项目常用固定套路
修改数据字段名 – map
描述:后台传过来的json数据,字段是xingming、sex,但是前端页面需要使用name、gender,于是需要对数据字段进行修改。
let persons = [
{
xingming: "杰克", age: 18, id: 5, sex: "男"
},
{
xingming: "李雷", age: 20, id: 2, sex: "男"
},
{
xingming: "韩梅梅", age: 16, id: 9, sex: "女"
},
{
xingming: "汤姆", age: 16, id: 2, sex: "男"
},
]
var data = persons.map((item) => {
return {
name: item.xingming,
gender: item.sex,
}
})
console.log(data)
/*
[
{ name: '杰克', gender: '男' },
{ name: '李雷', gender: '男' },
{ name: '韩梅梅', gender: '女' },
{ name: '汤姆', gender: '男' }
]
*/
分页加载数据(使用总数量total进行控制)
上滑加载更多和点击下一步加载更多逻辑相同。
// data
searchForm: {
pageNumber: 1,
pageSize: 8,
},
loading: false,
data:[],
total:0,
// methods
getDataList() {
// 多条件搜索用户列表
this.loading = true;
// 避免后台默认值
getIpList(this.searchForm).then(res => {
this.loading = false;
if (res.success) {
let arr = res.result.records;
//第一页赋值 其他页数 追加
this.data = this.searchForm.pageNumber === 1 ? arr : this.data.concat(arr);
this.total = res.result.total;
}
});
},
上滑加载更多数据(使用总页数pages进行控制),【点击查看全部代码】)
//
list: [], //列表
status: 'loadmore',
pageNumber: 1,
pageSize: 10,
pages: 0
//
mounted() {
this.init()
let _this=this
uni.$on('onReachBottom', function (data) {
console.log('触底了!',_this.pageNumber);
if (_this.pageNumber >= _this.pages) return
_this.status = 'loading'
_this.pageNumber = ++_this.pageNumber
_this.getList()
if (_this.pageNumber >= _this.pages) {
_this.status = 'nomore'
} else {
_this.status = 'loading'
}
})
},
//
getList() {
let param = {
pageNumber: this.pageNumber,
pageSize: this.pageSize
}
this.$api.exhibitor.listHot(param).then(res => {
const {
success,
result
} = res
if (success) {
if (result && result.records) {
let arr = result.records
//第一页赋值 其他页数 追加
this.list = this.pageNumber === 1 ? arr : this.list.concat(arr);
this.pages = result.pages
}
}
})
}