微信小程序 --- 下拉刷新上拉加載

查看文檔看到：page()函數注冊頁面的時候，有 onPullDownRefresh 監聽用戶下拉動作，onReachBottom 頁面上拉觸底事件的函數。

在小程序里，用戶頂部下拉是默認禁止的，我們需要把他設置為啟用，在page.json中的設置對所有頁面有效，在單獨頁面設置則對當前頁面有效；

"enablePullDownRefresh": true,  

簡單示例：

// 下拉刷新 
onPullDownRefresh: function () {
  console.log("下拉刷新")
  // 顯示頂部刷新圖標  
  wx.showNavigationBarLoading();
  // // 隱藏導航欄加載框  
  // wx.hideNavigationBarLoading();
  // // 停止下拉動作  
  // wx.stopPullDownRefresh();
},
// 上拉加載
onReachBottom:function(){
  console.log("我在上拉");
},

在一些情況下結合后端：下拉刷新

// 下拉刷新  
onPullDownRefresh: function () {  
   // 顯示頂部刷新圖標  
   wx.showNavigationBarLoading();  
   var that = this;  
   wx.request({  
     url: 'https://xxx/?page=0',  
     method: "GET",  
     header: {  
       'content-type': 'application/text'  
     },  
     success: function (res) {  
       that.setData({  
         moment: res.data.data  
       });  
       // 設置數組元素  
       that.setData({  
         moment: that.data.moment  
       });  
       console.log(that.data.moment);  
       // 隱藏導航欄加載框  
       wx.hideNavigationBarLoading();  
       // 停止下拉動作  
       wx.stopPullDownRefresh();  
     }  
   })  
 },  

上拉加載：

/* 
 * 頁面上拉觸底事件的處理函數 
 */  
onReachBottom: function () {  
  var that = this;  
  // 顯示加載圖標  
  wx.showLoading({  
    title: '玩命加載中',  
  })  
  // 頁數+1  
  page = page + 1;  
  wx.request({  
    url: 'https://xxx/?page=' + page,  
    method: "GET",  
    // 請求頭部  
    header: {  
      'content-type': 'application/text'  
    },  
    success: function (res) {  
      // 回調函數  
      var moment_list = that.data.moment;  

      for (var i = 0; i < res.data.data.length; i++) {  
        moment_list.push(res.data.data[i]);  
      }  
      // 設置數據  
      that.setData({  
        moment: that.data.moment  
      })  
      // 隱藏加載框  
      wx.hideLoading();  
    }  
  })
},  

到此。