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

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

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

一簡要介紹一下onreachBottom事件

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

截圖中展示了小程序對onreachBottom事件的具體解釋和參數。

二實例展示

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

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

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

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

getSupplyList(reachBottom) {//參數表示是否為觸底下拉加載數據
    wx.showLoading({
      title: '加載中...',
    });
    let that = this;//在回調甘薯里,this有時候不能直接用,防止出bug所初始化一個that
    util.request(api.SupplyList, {//發(fā)送請求
      type: that.data.type,
      page: that.data.page,
      limit: that.data.limit,
      searchValue: that.data.searchValue//請求的四個參數
    }).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;//將這一條數據返回supplyList并保存
        });
        //觸底加載新數據并保留老數據
        if (reachBottom) {
          supplyList = [...that.data.supplyList, ...supplyList]//將新數據加入老數據中
        }
        that.setData({//將獲取的值賦值給data中的數組和總頁數
          supplyList: supplyList,
          totalPages: res.data.pages
        });
        that.data.page++//所有操作完成后頁數加一
        wx.hideLoading();
      }
    }).finally(() => {
      wx.hideLoading();
    });
  },

寫好getSupplyList方法之后,可以在onReachBottom觸底加載事件里面進行調用,調用的時候要判斷當前頁是否小于總頁數,小于的話進行調用,并且在每次調用后將當前頁數加一,代碼如下.

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

這樣這個觸底加載的功能就已經實現了. 如圖

三遇到的一些問題

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

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

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