微信小程序中實(shí)現(xiàn)分頁(yè)加載的方法

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序中實(shí)現(xiàn)分頁(yè)加載的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是一家集策劃、設(shè)計(jì)、技術(shù)開(kāi)發(fā)一體的專業(yè)的建站公司，技術(shù)團(tuán)隊(duì)十多年來(lái)致力于為客戶提供企業(yè)網(wǎng)站定制，成都做手機(jī)網(wǎng)站。經(jīng)過(guò)多年發(fā)展，公司技術(shù)團(tuán)隊(duì)，先后服務(wù)了1000多家客戶，包括各類中小企業(yè)、上市公司、高校、政府。公司在過(guò)去十多年的資源積累，追求并一直堅(jiān)持，為客戶打造更有價(jià)值的互聯(lián)網(wǎng)平臺(tái)。

分頁(yè)加載功能大家遇到的應(yīng)該會(huì)經(jīng)常遇到，應(yīng)用場(chǎng)景也很多，例如微博，QQ，微信朋友圈以及新聞?lì)悜?yīng)用，都會(huì)有分頁(yè)加載的功能，這不僅節(jié)省了我們用戶的流量，還提升了用戶體驗(yàn)。

要實(shí)現(xiàn)這樣的功能，一般需要在請(qǐng)求數(shù)據(jù)時(shí)加入當(dāng)前請(qǐng)求頁(yè)數(shù)，以及頁(yè)的大?。宽?yè)顯示的數(shù)量）也有一部分接口是通過(guò)請(qǐng)求的開(kāi)始偏移量和結(jié)束偏移量請(qǐng)求數(shù)據(jù)，例如你一頁(yè)顯示10條數(shù)據(jù)，第一次（第一頁(yè)）請(qǐng)求即開(kāi)始start為0結(jié)束end是9，第二頁(yè)就是從10到19，以此類推。

既然要實(shí)現(xiàn)分頁(yè)加載功能，最重要就是下拉以及上拉的處理事件，在微信小程序中已經(jīng)幫我們封裝好了上拉以及下拉的觸發(fā)事件，如下

/**
 * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
 */
 onPullDownRefresh: function () {
 },

 /**
  * 頁(yè)面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {
 },

可能剛接觸微信小程序的愛(ài)好者，會(huì)遇到一個(gè)問(wèn)題，為什么我重寫了上拉和下拉函數(shù)，但是當(dāng)我上拉或者下拉的時(shí)候函數(shù)為什么不回調(diào)啊。莫急莫慌，那是因?yàn)槌酥貙戇@兩個(gè)函數(shù)，我們還需要在json配置文件加入下面代碼

{
  "enablePullDownRefresh": true
}

有了上面的代碼，我們每次上拉或者下拉就會(huì)觸發(fā)相對(duì)應(yīng)的函數(shù)了。

在data中創(chuàng)建數(shù)據(jù)

 data: {
  page: 1,
  pageSize: 30,
  hasMoreData: true,
  contentlist: [],
 },

page即為當(dāng)前請(qǐng)求數(shù)據(jù)時(shí)第幾頁(yè)，pageSize是每頁(yè)的數(shù)據(jù)的大小，hasMoreData用于上拉的時(shí)候是不是要繼續(xù)請(qǐng)求數(shù)據(jù)，即是不是還有更多數(shù)據(jù)。當(dāng)我們網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)成功后，如果請(qǐng)求數(shù)據(jù)的長(zhǎng)度小于pageSize: 30，那么就表示沒(méi)有更多數(shù)據(jù)，將hasMoreData更改為false，如果請(qǐng)求的數(shù)據(jù)長(zhǎng)度是30，表示還有更多數(shù)據(jù)那么hasMoreData久更改為true,并將頁(yè)數(shù)page加1.當(dāng)下拉的時(shí)候講page先更改為1，然后去查詢數(shù)據(jù)，當(dāng)查詢數(shù)據(jù)成功時(shí)，如果page為1，就將獲取的數(shù)據(jù)直接賦值給contentlist，如果頁(yè)數(shù)大于1的話，就將請(qǐng)求的數(shù)據(jù)追加在contentlist后面。這樣就可以實(shí)現(xiàn)分頁(yè)加載的功能了。

經(jīng)過(guò)上面的分析，我們已經(jīng)對(duì)分頁(yè)加載的實(shí)現(xiàn)有了一個(gè)清晰的認(rèn)識(shí)，那么接下來(lái)我就介紹代碼的實(shí)現(xiàn)。

 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: '加載數(shù)據(jù)失敗',
   })

  })
 },

上面函數(shù)就是獲取音樂(lè)列表信息的請(qǐng)求處理邏輯，該函數(shù)有一個(gè)參數(shù)message，它是用來(lái)展示加載數(shù)據(jù)時(shí)的提示信息，例如當(dāng)下拉的時(shí)候，提示信息為正在刷新數(shù)據(jù)，當(dāng)上拉的時(shí)候提示正在加載更多數(shù)據(jù)。

那么我們當(dāng)進(jìn)入頁(yè)面的時(shí)候開(kāi)始加載一次數(shù)據(jù)，即在onLoad函數(shù)，如下

 onLoad: function (options) {
  // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
  var that = this
  that.getMusicInfo('正在加載數(shù)據(jù)...')
 },

然后上拉和下拉函數(shù)的實(shí)現(xiàn)如下

 /**
 * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
 */
 onPullDownRefresh: function () {
  this.data.page = 1
  this.getMusicInfo('正在刷新數(shù)據(jù)')
 },

 /**
  * 頁(yè)面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {
  if (this.data.hasMoreData) {
   this.getMusicInfo('加載更多數(shù)據(jù)')
  } else {
   wx.showToast({
    title: '沒(méi)有更多數(shù)據(jù)',
   })
  }
 },

關(guān)于“微信小程序中實(shí)現(xiàn)分頁(yè)加載的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站欄目：微信小程序中實(shí)現(xiàn)分頁(yè)加載的方法
分享URL：http://bm7419.com/article28/geghcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、云服務(wù)器、電子商務(wù)、定制開(kāi)發(fā)、全網(wǎng)營(yíng)銷推廣、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容