工作日誌 隨手筆記 僅供參考

頁面下拉的時候顯示正在載入

載入完之後顯示暫無資料

 <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()  頁面上拉呼叫這個方法
    }
  },