我們在開發小程序時，一個列表裏難免會有很多條數據，比如我們一個列表有1000條數據，我們一下加載出來，而不做分頁，將會嚴重影響性能。所以這一節，我們來講講小程序分頁加載數據的實現。
老規矩，先看效果圖
可以看到我們每頁顯示10條數據，當滑動到底部時，會加載第二頁的數據，再往下滑動，就加載第三頁的數據。由於我們一共21條數據，所以第三頁加載完以後，會有一個“已加載全部數據”的提示。
本節知識點
1，小程序分頁加載
2，小程序列表顯示
3，雲數據庫的使用
4，雲數據庫分頁請求數據的實現
一，先定義數據
我們做分頁數據加載，肯定要先準備好數據，數據已經給大家準備好，如下圖，文章末尾會貼出數據源和本節課源碼的下載地址。
然後把數據導入到我們的雲開發的數據庫裏，關於數據如何導入，這裏不再講解，不知道的同學，請看下面這篇文章。或者去老師歷史文章裏找一下。
《小程序雲開發入門---雲數據庫數據源的導入與導出》
下面給大家看下我們的數據源，長什麼樣。其實很簡單，就是簡單的定義21條數據。
然後在看導入到數據庫的樣子。
二，分頁請求數據
我們第一步準備好了數據以後，接下來就來講講如何在js裏做分頁加載數據。
首先我們這裏用到了小程序雲開發數據庫的知識點
1，get方法：獲取雲數據庫數據
2，skip方法：跳過前面幾條數據，請求後面的數據
3，limit方法：請求多少條數據。
比如下面這段代碼,就是跳過前5條，請求從第6條開始往後的10條數據，就是請求6～15的數據，我們做分頁加載也就是基於這個原理。
wx.cloud.database().collection("list")
.skip(5) //從第幾個數據開始
.limit(10)
下面把我們index.js的完整代碼貼給大家。
//老師微信：2501902696
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;
}
到這裏我們就完整的實現裏分頁加載功能了。
源碼和數據源，已經給大家放到網盤裏了，有需要的同學請在文章底部留言，或者私信老師。