-
产品角度:提升用户体验
-
技术角度:后台接口支持分页
返台接口:{page:当前页码,pageSize:每页显示几条,start:起始偏移量}
- 实现方式:
1. 使用onReachBottom实现
//触底生命周期
onReachBottom() {
console.log('onReachBottom');
if(!this.data.flag) {
this.data.page++;
this.getGoods()
}
}
//加载商品列表
getGoods() {
let {categoryId,page,pageSize}=this.data;
let tempArr=[];
getGoodsList({categoryId,page,pageSize})
.then(res=>{
console.log('商品列表结果:',res);
if(res.code===0) {
tempArr=this.data.goodsArr.concat(res.data)
this.setData({
goodsArr:tempArr
})
}else if(res.code===700) {
this.setData({
flag:true
})
}
})
}
onShow() {
//自动加载商品列表
this.getGoods()
}