微信小程式之分頁載入的的案例

本篇文章主要介紹了微信小程式分頁載入的實例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

整理文檔，搜刮出一個微信小程式分頁載入的程式碼，稍微整理精簡一下做下分享。

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

原始碼傳送門

要實現這樣的功能，一般需要在請求資料時加入目前請求頁數，以及頁的大小（每頁顯示的數量）也有一部分介面是透過請求的開始偏移量和結束偏移量請求數據，例如你一頁顯示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: &#39;加载数据失败&#39;,
   })

  })
 },

上面函數就是獲取音樂清單資訊的請求處理邏輯，該函數有一個參數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: '没有更多数据',
   })
  }
 },

以上是微信小程式之分頁載入的的案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！