微信小程序使用onreachBottom實現(xiàn)頁面觸底加載及分頁效果

更新時間：2022年10月18日 09:35:35 作者：孔祥宙

小程序還沒有使用pc端的那種分頁格式,下面這篇文章主要給大家介紹了關于微信小程序使用onreachBottom實現(xiàn)頁面觸底加載及分頁效果的相關資料,需要的朋友可以參考下

一簡要介紹一下onreachBottom事件

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

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

二實例展示

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

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

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

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

getSupplyList(reachBottom) {//參數(shù)表示是否為觸底下拉加載數(shù)據(jù)
    wx.showLoading({
      title: '加載中...',
    });
    let that = this;//在回調(diào)甘薯里,this有時候不能直接用,防止出bug所初始化一個that
    util.request(api.SupplyList, {//發(fā)送請求
      type: that.data.type,
      page: that.data.page,
      limit: that.data.limit,
      searchValue: that.data.searchValue//請求的四個參數(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");//設置日期格式
          item.herbListImage && (item.herbListImage01 = item.herbListImage.split(',')[0])//設置獲取的圖片列表
          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觸底加載事件里面進行調(diào)用,調(diào)用的時候要判斷當前頁是否小于總頁數(shù),小于的話進行調(diào)用,并且在每次調(diào)用后將當前頁數(shù)加一,代碼如下.

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

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

三遇到的一些問題

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

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

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