下拉與觸底函式是每一個頁面都有事件函式, 同頁面生命週期函式類似 : 監聽並執行

onPullDownRefresh 判斷使用者在最頂部下拉時觸發

如果下拉後再拉回去, 不觸發

 onReachBottom 判斷使用者到達最底部時觸發

如果當面頁面的內容, 不夠多時, 不觸發, 可以這樣做: 在wxss中設定頁面的高度為100%, 一般就可以了

page{
    height: 100%;
}

下拉重新整理的作用是重新整理當前頁面, 可能是由於網路原因卡慢時, 需要重新載入當前頁面

觸底載入的作用是載入下一頁的內容, 一般是使用者需要瀏覽更多的內容

不論是下拉還是觸底重新整理, 都是更新當前頁面中的內容

如果後端分好頁以後, 只需要根據當前頁面, 傳送不同資料到後端取得需要資料, 再渲染

原理就是這樣, 如下實現:

說明: currentObject是封裝好的分頁物件, 包含的是所需要的所有資料(一共多少頁, 當前是多少頁, 資料庫記錄 等等)

         arr是currentObject中的集合資料, 即目標資料(資料庫記錄)

         後臺是根據你傳送的頁碼, 去查詢得到該頁碼錶示的資料, 所以關鍵是正確傳送頁碼

Page({
  data: {
    currentObject: {},    // 表示當前分頁的物件
    arr : [],             // 表示當前分頁的物件中, 資料庫中的記錄集合
  },

  // 下拉重新整理當前頁
  onPullDownRefresh: function (e) {
    console.log("執行下拉重新整理當前頁的內容");
    // 顯示頂部重新整理圖示
    wx.showNavigationBarLoading();
    var that = this;
    wx.request({
      url: 'http://127.0.0.1:4444/getXxx',        // 請求資料的url
      data : {
        currentPage: that.data.currentObject.currentPage,  // 先取出當前頁, 表示將要獲取當前這個頁面的內容
        item : 6
      },
      success: function (res) {
        that.setData({
          currentObject: res.data,    // 分頁物件
          arr: res.data.songList      // 分頁物件的集合屬性, 代表資料庫記錄
        });

        // 隱藏導航上的載入框
        wx.hideNavigationBarLoading();
        // 停止下拉動作
        wx.stopPullDownRefresh();
      }
    })
  },

  // 觸底載入下一頁
  onReachBottom: function () {
    console.log("觸底載入下一頁的內容");
    // 顯示一個載入圖示
    wx.showToast({
      title: '正在載入中...',
      duration : 15000,          // 提示訊息的最大持續時間 15s
      icon: 'loading'
    });
    var f = function () {
      wx.hideToast();
    };
    var that = this;
    wx.request({
      url: 'http://127.0.0.1:4444/getXxx',
      data: {
        currentPage: that.data.currentObject.currentPage + 1,  // 下一頁
        item: 6
      },
      success: function (res) {
        that.setData({
          currentObject: res.data,    // 分頁物件
          arr : res.data.songList     // 分頁物件的集合屬性, 代表資料庫記錄
        });
      
        // 隱藏載入提示
        setTimeout(f, 500);          // 載入成功後, 我讓它0.5s後再隱藏
      }
    })
  },
})
 

其它注意事項:

app.json中

"window": {

"backgroundTextStyle": "",             // 這個值不能是light, 否則下拉動作效果不明顯

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle": "black"

},

當前頁面的json檔案中, 比如index.json中, 開啟下拉重新整理

{

"enablePullDownRefresh": true,       // 這個值預設是false, 將其改為true, 否則無法下拉

"navigationBarTitleText": "index頁面"

}