微信小程式分頁載入

Code4Android發表於2019-03-01
微信小程式

分頁載入功能大家遇到的應該會經常遇到，應用場景也很多，例如微博，QQ，微信朋友圈以及新聞類應用，都會有分頁載入的功能，這不僅節省了我們使用者的流量，還提升了使用者體驗。那麼今天的這篇文章就是介紹微信小程式中如何實現分頁載入的功能。照例先上原始碼及效果圖。

原始碼傳送門

music.gif
music.gif

要實現這樣的功能，一般需要在請求資料時加入當前請求頁數，以及頁的大小（每頁顯示的數量）也有一部分介面是通過請求的開始偏移量和結束偏移量請求資料，例如你一頁顯示10條資料，第一次（第一頁）請求即開始start為0結束end是9，第二頁就是從10到19，以此類推。

既然要實現分頁載入功能，最重要就是下拉以及上拉的處理事件，在微信小程式中已經幫我們封裝好了上拉以及下拉的觸發事件，如下

/**
 * 頁面相關事件處理函式--監聽使用者下拉動作
 */
  onPullDownRefresh: function () {
  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
  },複製程式碼

可能剛接觸微信小程式的愛好者，會遇到一個問題，為什麼我重寫了上拉和下拉函式，但是當我上拉或者下拉的時候函式為什麼不回撥啊。莫急莫慌，那是因為除了重寫這兩個函式，我們還需要在json配置檔案加入下面程式碼

{
    "enablePullDownRefresh": true
}複製程式碼

有了上面的程式碼，我們每次上拉或者下拉就會觸發相對應的函式了。
在data中建立資料

  data: {
    page: 1,
    pageSize: 30,
    hasMoreData: true,
    contentlist: [],
  },複製程式碼

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

經過上面的分析，我們已經對分頁載入的實現有了一個清晰的認識，那麼接下來我就介紹程式碼的實現。

 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: `載入資料失敗`,
      })

    })
  },複製程式碼

上面函式就是獲取音樂列表資訊的請求處理邏輯，該函式有一個引數message，它是用來展示載入資料時的提示資訊，例如當下拉的時候，提示資訊為正在重新整理資料，當上拉的時候提示正在載入更多資料。
那麼我們當進入頁面的時候開始載入一次資料，即在onLoad函式，如下

  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: `沒有更多資料`,
      })
    }
  },複製程式碼

相關文章