微信小程序開發之分頁加載

本文將帶你瞭解微信小程序開發之分頁加載，希望本文對大家學微信有所幫助。

分頁加載功能大家遇到的應該會經常遇到，應用場景也很多，例如微博，QQ，微信朋友圈以及新聞類應用，都會有分頁加載的功能，例如你一頁顯示10條數據，第一次（第一頁）請求即開始start爲0結束end是9，第二頁就是從10到19，以此類推。既然要實現分頁加載功能，最重要就是下拉以及上拉的處理事件，在微信小程序中已經幫我們封裝好了上拉以及下拉的觸發事件，

如下

• 頁面相關事件處理函數–監聽用戶下拉動作 */
  onPullDownRefresh: function () {
  },
• 頁面上拉觸底事件的處理函數
  onReachBottom: function () {
  },
  重寫這兩個函數，我們還需要在json配置文件加入下面代碼{
  “enablePullDownRefresh”: true
  }

getMusicInfo: function (message) {
        var that = this
        var data = {
          showapi_appid: '25158',
          showapi_sign:   'c0d685445898438f8c12ee8e93c2ee74',
          keyword: '我',
          page: that.data.page
        }
          network.requestLoading('https://route.showapi.com/213-1', data,   message, function (res) {
          console.log(res)
          var contentlistTem =   that.data.contentlist
          if (res.showapi_res_code == 0)   {
            if (that.data.page == 1)   {
              contentlistTem = []
            }
            var contentlist =   res.showapi_res_body.pagebean.contentlist
            if (contentlist.length <   that.data.pageSize) {
              that.setData({
                contentlist:   contentlistTem.concat(contentlist),
                hasMoreData: false
              })
            } else {
              that.setData({
                contentlist:   contentlistTem.concat(contentlist),
                hasMoreData: true,
                page: that.data.page +   1
              })
            }
          } else {
            wx.showToast({
              title:   res.showapi_res_error,
            })
          }
    
        }, function (res) {
          wx.showToast({
            title: '加載數據失敗',
          })
    
        })
      },

page即爲當前請求數據時第幾頁，pageSize是每頁的數據的大小，hasMoreData用於上拉的時候是不是要繼續請求數據，即是不是還有更多數據。當我們網絡請求數據成功後，如果請求數據的長度小於pageSize: 30，那麼就表示沒有更多數據，將hasMoreData更改爲false，如果請求的數據長度是30，表示還有更多數據那麼hasMoreData久更改爲true,並將頁數page加1.當下拉的時候講page先更改爲1，然後去查詢數據，當查詢數據成功時，如果page爲1，就將獲取的數據直接賦值給contentlist，如果頁數大於1的話，就將請求的數據追加在contentlist後面。這樣就可以實現分頁加載的功能了。

 onLoad: function (options) {
        // 頁面初始化 options爲頁面跳轉所帶來的參數
        var that = this
          that.getMusicInfo('正在加載數據...')
      },
onPullDownRefresh: function ()   { //頁面相關事件處理函數--監聽用戶下拉動作
        this.data.page = 1
        this.getMusicInfo('正在刷新數據')
      },
 onReachBottom: function () {  //頁面上拉觸底事件的處理函數
        if (this.data.hasMoreData)   {
            this.getMusicInfo('加載更多數據')
        } else {
          wx.showToast({
            title: '沒有更多數據',
          })
        }
      },