1 首先后台的接口必须支持分页
返台接口:
page | pageSize | start |
---|---|---|
当前页码 | 每页显示几条 | 起始偏移量 |
而他视为了提升用户的体验
2 实现方式:
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()
}
2 使用scroll-view实现