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

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

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

?

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

本節(jié)知識點

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

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

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

?

?

?

?

?

然后把數(shù)據(jù)導(dǎo)入到我們的云開發(fā)的數(shù)據(jù)庫里，關(guān)于數(shù)據(jù)如何導(dǎo)入，這里不再講解，不知道的同學(xué)，請看下面這篇文章?；蛘呷ダ蠋煔v史文章里找一下。

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

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

?

?

?

?

?

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

?

?

?

?

?

二，分頁請求數(shù)據(jù)

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

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

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

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

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

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

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

上面的代碼就是我們實現(xiàn)分頁加載的所有邏輯代碼。簡單說下代碼

1，我們首先進頁面時會請求前10條內(nèi)容

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

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

三，列表布局和樣式

其實index.wxml和index.wxss的代碼很簡單，給大家把代碼貼出來。

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;
}

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

源碼已經(jīng)給大家放到網(wǎng)盤里了，有需要的同學(xué)請在文章底部留言，或者私信老師。