一 簡要介紹一下onreachBottom事件

onreachBottom和onLoad以及onShow一樣，都屬于小程序的生命周期事件，作用就是在頁面下拉到底部時(shí)觸發(fā)這個(gè)事件，一般適用于數(shù)據(jù)比較多的情況下，實(shí)現(xiàn)懶加載并分頁展示數(shù)據(jù)。

截圖中展示了小程序?qū)nreachBottom事件的具體解釋和參數(shù)。

二  實(shí)例展示

此次展示的實(shí)例是在小程序首頁加載二手車車源信息的下拉分頁加載數(shù)據(jù)的效果。

首先需要在data里面初始化分頁的頁數(shù)和獲取的數(shù)據(jù)數(shù)組。

寫好觸底之后加載新數(shù)據(jù)并保留老數(shù)據(jù)的方法。我把加載第一頁數(shù)據(jù)和觸底加載新數(shù)據(jù)寫在了一個(gè)方法里面，方法里面加入了一個(gè)布爾型的reachBottom參數(shù),在onLoad事件里參數(shù)為false,只加載第一頁;在onreachBottom事件里參數(shù)為true,要加載新的數(shù)據(jù).向后端請求的方法為util.request,詳情可以看我上一個(gè)博客,貼個(gè)鏈接.這里的參數(shù)比較多,貼圖

http://www.dbjr.com.cn/article/265256.htm將從后端請求的數(shù)據(jù)保存在supplyList中,并且通過setData方法寫入data中的supplyList中,將總頁數(shù)也保存在totalPages中,最后每獲取一整頁的數(shù)據(jù)之后將頁數(shù)加一,為下頁調(diào)用數(shù)據(jù)做準(zhǔn)備.方法的整體代碼如下.

getSupplyList(reachBottom) {//參數(shù)表示是否為觸底下拉加載數(shù)據(jù)
    wx.showLoading({
      title: '加載中...',
    });
    let that = this;//在回調(diào)甘薯里,this有時(shí)候不能直接用,防止出bug所初始化一個(gè)that
    util.request(api.SupplyList, {//發(fā)送請求
      type: that.data.type,
      page: that.data.page,
      limit: that.data.limit,
      searchValue: that.data.searchValue//請求的四個(gè)參數(shù)
    }).then(function (res) {
      console.log(that.data.page);
      if (res.errno === 0) {//為0請求成功
        let supplyList = res.data.list.map(item => {
          item.dueTime = util.formatTime2(new Date(item.dueTime), "Y/M/D");//設(shè)置日期格式
          item.herbListImage && (item.herbListImage01 = item.herbListImage.split(',')[0])//設(shè)置獲取的圖片列表
          item.companyLogo = item.companyLogo || item.avatar;
          item.companyName = item.companyName || item.nickname;
          return item;//將這一條數(shù)據(jù)返回supplyList并保存
        });
        //觸底加載新數(shù)據(jù)并保留老數(shù)據(jù)
        if (reachBottom) {
          supplyList = [...that.data.supplyList, ...supplyList]//將新數(shù)據(jù)加入老數(shù)據(jù)中
        }
        that.setData({//將獲取的值賦值給data中的數(shù)組和總頁數(shù)
          supplyList: supplyList,
          totalPages: res.data.pages
        });
        that.data.page++//所有操作完成后頁數(shù)加一
        wx.hideLoading();
      }
    }).finally(() => {
      wx.hideLoading();
    });
  },

寫好getSupplyList方法之后,可以在onReachBottom觸底加載事件里面進(jìn)行調(diào)用,調(diào)用的時(shí)候要判斷當(dāng)前頁是否小于總頁數(shù),小于的話進(jìn)行調(diào)用,并且在每次調(diào)用后將當(dāng)前頁數(shù)加一,代碼如下.

  onReachBottom() {//觸底加載事件
    if (this.data.totalPages > this.data.page) {//判斷當(dāng)前也是否小于總頁數(shù)
      this.setData({
        page: this.data.page + 1//當(dāng)前頁加一
      });
    } else {
      return false;
    }
    this.getSupplyList(true);//調(diào)用方法
  },

這樣這個(gè)觸底加載的功能就已經(jīng)實(shí)現(xiàn)了. 如圖

三 遇到的一些問題

在實(shí)際開發(fā)這個(gè)過程當(dāng)中,也遇到了一些問題,可以和大家分享一下,互相學(xué)習(xí)

在測試的時(shí)候,第一次分頁加載實(shí)現(xiàn)了,后面都沒有實(shí)現(xiàn),在排查之后,發(fā)現(xiàn)經(jīng)過第一次的分頁之后this.data.page即當(dāng)前頁面變?yōu)榱?,在刷新頁面之后并沒有重新初始化為1,所以要在頁面每次關(guān)閉之后將頁面重新賦值為1,如圖.

在寫getSupplyList方法時(shí),在data里面定義好的變量使用的時(shí)候總是顯示 undefined 未定義,在csdn上查到了原因,是因?yàn)樵趈s的一些函數(shù)或者回調(diào)函數(shù)中,直接用this可能是無法訪問的,需要重新定義一個(gè)變量代替this,解決方法如下,用that代替this來使用data中的變量.

如果要實(shí)現(xiàn)想動圖里面那樣的無感觸底加載的功能,只需要在對應(yīng)的json文件里面加入"onReachBottomDistance": 300,可以在離底部300的時(shí)候就開始執(zhí)行觸底加載事件.

總結(jié)

到此這篇關(guān)于微信小程序使用onreachBottom實(shí)現(xiàn)頁面觸底加載及分頁效果的文章就介紹到這了,更多相關(guān)小程序頁面觸底加載及分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論