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

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

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

加载完之后显示暂无数据

 

 <view class='release_list'>

      <view wx:for="{{release}}" class='shoppcall comment' data-id="{{item.id }}">
           
           <button wx:if='{{item.is_me == 1}}' class='revoke' bindtap='binddelete' data-id='{{item.id}}' data-index='{{index}}'>撤销</button>
           
           <view class='publish'>
            <image src='{{item.avatar}}'></image>
           
            <view class='publish_list'>
              <text class='publish_list_item'>{{item.username}}</text>
              <view class='like'>
                <text class='publish_time'>{{item.publish_time}}</text>
                 <view  class='like_num_list' bindtap='bindlike' data-id='{{item.id}}'>
                    <text class='iconfont icon-dianzan2' style='{{item.like==1?"color:red":"color:black"}}'></text>
                   
                    <text class='like_num'>{{item.likes_count}}</text>
                 </view>
               
              </view>
             
              <text class='redtree_text'>{{item.content}}</text>
            </view>
           </view>
          
         
       </view>    

       <view  class='Nocomment' wx:if='{{release.length == 0}}'>
         暂无评论
       </view>

   </view>
     
    <view class='loadmore' hidden='{{isShowLoadmore}}'>
      <view class='loading'></view>
      <view class='loadmore_tips'>正在加载</view>
    </view>
    <view class="loadmore loadmore_line" hidden='{{!isShowNoDatasTips}}'>
      <view class="loadmore_tips">暂无数据</view>
     </view>

    

 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()  页面上拉调用这个方法
    }
  },