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

我們在開發小程序時，一個列表里難免會有很多條數據，比如我們一個列表有1000條數據，我們一下加載出來，而不做分頁，將會嚴重影響性能。所以這一節，我們來講講小程序分頁加載數據的實現。

老規矩，先看效果圖

?

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

本節知識點

• 1，小程序分頁加載
• 2，小程序列表顯示
• 3，云數據庫的使用
• 4，云數據庫分頁請求數據的實現

一，先定義數據

我們做分頁數據加載，肯定要先準備好數據，數據已經給大家準備好，如下圖，文章末尾會貼出數據源和本節課源碼的下載地址。

?

?

?

?

?

然后把數據導入到我們的云開發的數據庫里，關于數據如何導入，這里不再講解，不知道的同學，請看下面這篇文章?；蛘呷ダ蠋煔v史文章里找一下。

《小程序云開發入門---云數據庫數據源的導入與導出》

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

?

?

?

?

?

然后在看導入到數據庫的樣子。

?

?

?

?

?

二，分頁請求數據

我們第一步準備好了數據以后，接下來就來講講如何在js里做分頁加載數據。

首先我們這里用到了小程序云開發數據庫的知識點

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

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

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

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

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

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

1，我們首先進頁面時會請求前10條內容

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

3，當用戶滑動到底部時，會觸發onReachBottom事件，在這個事件里做第二頁到請求。然后第二頁數據請求成功以后。繼續將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;
}

到這里我們就完整的實現里分頁加載功能了。

源碼已經給大家放到網盤里了，有需要的同學請在文章底部留言，或者私信老師。