1. 程式人生 > >微信小程式下拉重新整理和上拉載入

微信小程式下拉重新整理和上拉載入

example One:如果所有頁面都要開啟下拉重新整理功能:

aap.json中:
"window":{
      "enablePullDownRefresh":true, //開啟下拉重新整理功能
      "navigationBarTextStyle":"dark"
}

每個頁面對應的js中:
Page({
      onPullDownRefresh: function () {
            this.init();//初始化頁面的介面請求
            wx.stopPullDownRefresh();//關閉下拉重新整理
     }
})

//=======================================================================================

example Two:如果是單個頁面開啟下拉重新整理:

對應頁面的json中:
{
      "enablePullDownRefresh":true,//開啟下拉重新整理功能
      "backgroundTextStyle":"dark"
}

對應頁面的js中:
Page({
      onPullDownRefresh: function () {
            this.init();//初始化頁面的介面請求
            wx.stopPullDownRefresh();//關閉下拉重新整理
      }
})

//=======================================================================================

example Three:如果是單個頁面開啟下拉重新整理和上拉載入更多:

對應頁面的json中:
{
      "enablePullDownRefresh":true,//開啟下拉重新整理功能
      "onReachBottomDistance":50, //上拉的距離
      "backgroundTextStyle":"dark"
}

對應頁面的js中:
data{
      overtimeList:[],            //頁面渲染的資料
      pageNum:0,               //第幾頁/或者從第幾條資料開始(根據後臺介面的條件,我這裡是第二種)
      sayloading:' '              //上拉的文字顯示
}

//下拉重新整理
onPullDownRefresh: function () {
      this.setData({
          pageNum: 0,
          sayloading: ""
      })
      this.init();
      wx.stopPullDownRefresh()
},

//上拉載入
onReachBottom:function (){
      let pageNum=this.data.pageNum;
      pageNum=pageNum+10
      this.setData({
          pageNum:pageNum,
          sayloading:"資料載入中..."
      })
      this.init();
      wx.hideLoading();// 隱藏載入框
},

init:function(){
      wx.request({
            url: getApp().data.service_url + 'api',
            data: {
                  id: getApp().data.id++,
                  sign: "666666",
                  sessionId: wx.getStorageSync('sessionId'),
                  pageNum: this.data.pageNum,    //第幾條資料,每次+10(上拉載入方法中)
                  pageSize: '10',     //每頁顯示10條資料
           },
          header: {
                  'content-type': 'application/x-www-form-urlencoded'
          },
          success: function (res) {
               var overtimeListArr = this.data.overtimeList;
               for (var i = 0; i < res.data.data.overtimeList.length; i++) {
                   overtimeListArr.push(res.data.data.overtimeList[i])
               }
               if (this.data.pageNum==0){    //下拉重新整理
                   this.setData({
                       overtimeList: res.data.data.overtimeList,
                   })
              }else{
                   this.setData({
                       overtimeList: overtimeListArr,
                   })
            }
            if (res.data.data.overtimeList.length<=0){
                   this.setData({
                       sayloading:'沒有更多資料了…^_^'
                   })
            }
        }
    })
}