上拉加载
-
产品角度:提升用户体验
-
技术角度:后台接口支持分页
返台接口:{page:当前页码,pageSize:每页显示几条,start:起始偏移量}
-
实现方式:
- 使用onReachBottom实现
//加载商品列表 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() } //触底生命周期 onReachBottom() { console.log('onReachBottom'); if(!this.data.flag) { this.data.page++; this.getGoods() } }