小程序上拉加载

上拉加载

1. 产品角度：提升用户体验

2. 技术角度：后台接口支持分页

返台接口：{page:当前页码，pageSize:每页显示几条,start:起始偏移量}

3. 实现方式:

   1. 使用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()
      }
     }