小程序 页面懒加载功能 分页加载

工作日志 随手笔记 仅供参考

页面下拉的时候显示正在加载

加载完之后显示暂无数据

 

 

      
           
           撤销
           
           
            
           
            
              {{item.username}}
              
                {{item.publish_time}}
                 
                    
                   
                    {{item.likes_count}}
                 
               
              
             
              {{item.content}}
            
           
          
         
           

       
         暂无评论
       

   
     
    
    

    

 data:{
release：''
page :2, //从第二页开始加载 
page_size:10, //每页加载十个 

isShowLoadmore:false, //正在加载 

isShowNoDatasTips:false, //暂无数据

 endloading: false } //判断是否还有数据

 

// 评论分页加载
  reviewpage:function(e){
    var that =this;
    var id = this.data.id;
    var page = this.data.page;
     wx.request({
       url: '后台给你的数据接口', 
       method:'POST' ,
       data:{
          id:id,  //这个是店铺的id 传给后台 不然不知道返回给你哪个店铺的评论
          page:that.data.page, //默认从第二页加载
          page_size:that.data.page_size //每页加载十条评论 自己设置
       },
       header: {
         'appid': 'fZ4wruPFDWZTEwD1gUhbkez0CUmeWGJx',
         'mbcore-access-token': wx.getStorageSync('access_token'),
         'mbcore-auth-token': wx.getStorageSync('auth_token')
       },
       success:function(res){
         console.log(res)
         console.log('→')
         if(res.data.code == 1){  //判断当code == 1 的时候得到数据

           var datas = res.data.result.comments; // 下面有得到的数据可以参考
           if (res.data.result.more_data == 0){ //如果more_data == 0 表示没有可加载的数据了
             that.setData({
               isShowLoadmore: true, //隐藏正在加载
               isShowNoDatasTips: true, //显示暂无平路
               endloading: true, //上拉不在加载
             })
               
           }else {
             console.log('走到这了')
              that.setData({
                release: that.data.release.concat(datas)  //将得到的评论添加到release 中 更新
              })
              if (datas.length < that.data.page_size){ //如果剩下评论数 小于10表示数据加载完了
                console.log('已经加载完了')
                that.setData({
                  isShowLoadmore: false, //隐藏正在加载
                  isShowNoDatasTips: false, //显示暂无数据
                })
              }
           }
           that.setData({
             page:page+1 //更新page 请求下一页数据
           })
         }else{
           console.log('code等于0啊！')
         }
       }
     })
  },

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that = this;
    var endloading = that.data.endloading
    if (!endloading){
      that.reviewpage()  页面上拉调用这个方法
    }
  },