微信小程序分頁(yè)加載數(shù)據(jù)～上拉加載更多～小程序云數(shù)據(jù)庫(kù)的分頁(yè)加載
2021-08-08 11:58:33

我們?cè)陂_(kāi)發(fā)小程序時(shí)，一個(gè)列表里難免會(huì)有很多條數(shù)據(jù)，比如我們一個(gè)列表有1000條數(shù)據(jù)，我們一下加載出來(lái)，而不做分頁(yè)，將會(huì)嚴(yán)重影響性能。所以這一節(jié)，我們來(lái)講講小程序分頁(yè)加載數(shù)據(jù)的實(shí)現(xiàn)。

老規(guī)矩，先看效果圖

?

可以看到我們每頁(yè)顯示10條數(shù)據(jù)，當(dāng)滑動(dòng)到底部時(shí)，會(huì)加載第二頁(yè)的數(shù)據(jù)，再往下滑動(dòng)，就加載第三頁(yè)的數(shù)據(jù)。由于我們一共21條數(shù)據(jù)，所以第三頁(yè)加載完以后，會(huì)有一個(gè)“已加載全部數(shù)據(jù)”的提示。

本節(jié)知識(shí)點(diǎn)

• 1，小程序分頁(yè)加載
• 2，小程序列表顯示
• 3，云數(shù)據(jù)庫(kù)的使用
• 4，云數(shù)據(jù)庫(kù)分頁(yè)請(qǐng)求數(shù)據(jù)的實(shí)現(xiàn)

一，先定義數(shù)據(jù)

我們做分頁(yè)數(shù)據(jù)加載，肯定要先準(zhǔn)備好數(shù)據(jù)，數(shù)據(jù)已經(jīng)給大家準(zhǔn)備好，如下圖，文章末尾會(huì)貼出數(shù)據(jù)源和本節(jié)課源碼的下載地址。

?

?

?

?

?

然后把數(shù)據(jù)導(dǎo)入到我們的云開(kāi)發(fā)的數(shù)據(jù)庫(kù)里，關(guān)于數(shù)據(jù)如何導(dǎo)入，這里不再講解，不知道的同學(xué)，請(qǐng)看下面這篇文章。或者去老師歷史文章里找一下。

《小程序云開(kāi)發(fā)入門---云數(shù)據(jù)庫(kù)數(shù)據(jù)源的導(dǎo)入與導(dǎo)出》

下面給大家看下我們的數(shù)據(jù)源，長(zhǎng)什么樣。其實(shí)很簡(jiǎn)單，就是簡(jiǎn)單的定義21條數(shù)據(jù)。

?

?

?

?

?

然后在看導(dǎo)入到數(shù)據(jù)庫(kù)的樣子。

?

?

?

?

?

二，分頁(yè)請(qǐng)求數(shù)據(jù)

我們第一步準(zhǔn)備好了數(shù)據(jù)以后，接下來(lái)就來(lái)講講如何在js里做分頁(yè)加載數(shù)據(jù)。

首先我們這里用到了小程序云開(kāi)發(fā)數(shù)據(jù)庫(kù)的知識(shí)點(diǎn)

• 1，get方法：獲取云數(shù)據(jù)庫(kù)數(shù)據(jù)
• 2，skip方法：跳過(guò)前面幾條數(shù)據(jù)，請(qǐng)求后面的數(shù)據(jù)
• 3，limit方法：請(qǐng)求多少條數(shù)據(jù)。

比如下面這段代碼,就是跳過(guò)前5條，請(qǐng)求從第6條開(kāi)始往后的10條數(shù)據(jù)，就是請(qǐng)求6～15的數(shù)據(jù)，我們做分頁(yè)加載也就是基于這個(gè)原理。

 wx.cloud.database().collection("list")
      .skip(5) //從第幾個(gè)數(shù)據(jù)開(kāi)始
      .limit(10)

下面把我們index.js的完整代碼貼給大家。

let currentPage = 0 // 當(dāng)前第幾頁(yè),0代表第一頁(yè) 
let pageSize = 10 //每頁(yè)顯示多少數(shù)據(jù) 
Page({
  data: {
    dataList: [], //放置返回?cái)?shù)據(jù)的數(shù)組  
    loadMore: false, //"上拉加載"的變量，默認(rèn)false，隱藏  
    loadAll: false //“沒(méi)有數(shù)據(jù)”的變量，默認(rèn)false，隱藏  
  },
  //頁(yè)面顯示的事件
  onShow() {
    this.getData()
  },
  //頁(yè)面上拉觸底事件的處理函數(shù)
  onReachBottom: function() {
    console.log("上拉觸底事件")
    let that = this
    if (!that.data.loadMore) {
      that.setData({
        loadMore: true, //加載中  
        loadAll: false //是否加載完所有數(shù)據(jù)
      });
      //加載更多，這里做下延時(shí)加載
      setTimeout(function() {
        that.getData()
      }, 2000)
    }
  },
  //訪問(wèn)網(wǎng)絡(luò),請(qǐng)求數(shù)據(jù)  
  getData() {
    let that = this;
    //第一次加載數(shù)據(jù)
    if (currentPage == 1) {
      this.setData({
        loadMore: true, //把"上拉加載"的變量設(shè)為true，顯示  
        loadAll: false //把“沒(méi)有數(shù)據(jù)”設(shè)為false，隱藏  
      })
    }
    //云數(shù)據(jù)的請(qǐng)求
    wx.cloud.database().collection("list")
      .skip(currentPage * pageSize) //從第幾個(gè)數(shù)據(jù)開(kāi)始
      .limit(pageSize)
      .get({
        success(res) {
          if (res.data && res.data.length > 0) {
            console.log("請(qǐng)求成功", res.data)
            currentPage++
            //把新請(qǐng)求到的數(shù)據(jù)添加到dataList里  
            let list = that.data.dataList.concat(res.data)
            that.setData({
              dataList: list, //獲取數(shù)據(jù)數(shù)組    
              loadMore: false //把"上拉加載"的變量設(shè)為false，顯示  
            });
            if (res.data.length < pageSize) {
              that.setData({
                loadMore: false, //隱藏加載中。。
                loadAll: true //所有數(shù)據(jù)都加載完了
              });
            }
          } else {
            that.setData({
              loadAll: true, //把“沒(méi)有數(shù)據(jù)”設(shè)為true，顯示  
              loadMore: false //把"上拉加載"的變量設(shè)為false，隱藏  
            });
          }
        },
        fail(res) {
          console.log("請(qǐng)求失敗", res)
          that.setData({
            loadAll: false,
            loadMore: false
          });
        }
      })
  },
})

上面的代碼就是我們實(shí)現(xiàn)分頁(yè)加載的所有邏輯代碼。簡(jiǎn)單說(shuō)下代碼

1，我們首先進(jìn)頁(yè)面時(shí)會(huì)請(qǐng)求前10條內(nèi)容

2，10條內(nèi)容請(qǐng)求成功以后，我們會(huì)把請(qǐng)求到的內(nèi)容加入dataList數(shù)組，然后把dataList里的數(shù)據(jù)顯示到頁(yè)面上。并將currentPage加一，用于請(qǐng)求第二頁(yè)數(shù)據(jù)。

3，當(dāng)用戶滑動(dòng)到底部時(shí)，會(huì)觸發(fā)onReachBottom事件，在這個(gè)事件里做第二頁(yè)到請(qǐng)求。然后第二頁(yè)數(shù)據(jù)請(qǐng)求成功以后。繼續(xù)將currentPage加1，這里要記住一定，一定要請(qǐng)求成功以后才將currentPage +1。

三，列表布局和樣式

其實(shí)index.wxml和index.wxss的代碼很簡(jiǎn)單，給大家把代碼貼出來(lái)。

1，index.wxml

<scroll-view scroll-y="true" bindscrolltolower="searchScrollLower">
  <view class="result-item" wx:for="{{dataList}}" wx:key="item">
    <text class="title">{{item.content}}</text>
  </view>
  <view class="loading" hidden="{{!loadMore}}">正在載入更多...</view>
  <view class="loading" hidden="{{!loadAll}}">已加載全部</view>
</scroll-view>

2,index.wxss

page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.result-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx 0 20rpx 110rpx;
  overflow: hidden;
  border-bottom: 2rpx solid #e5e5e5;
}
.title {
  height: 110rpx;
}
.loading {
  position: relative;
  bottom: 5rpx;
  padding: 10rpx;
  text-align: center;
}

到這里我們就完整的實(shí)現(xiàn)里分頁(yè)加載功能了。

源碼已經(jīng)給大家放到網(wǎng)盤里了，有需要的同學(xué)請(qǐng)?jiān)谖恼碌撞苛粞?，或者私信老師?/p>