微信小程序做分頁加載數據，會做一些下拉加載更多、然後上拉刷新的操作。數據放在一個for循環裏去加載，數據源是一個數組對象。在加載下一頁數據時，將下一頁的數據拼到當前數組後面。
代碼如下：
wxml代碼
<scroll-view class="scrollview">
<block wx:for="{{list}}" wx:key="index">
<view class="item">{{item.title}} ({{item.author}})</view>
</block>
</scroll-view>
<view class="fixed-bottom" bindtap="loadMore">加載更多</view>
js代碼
page({
/**
* 頁面的初始數據
*/
data: {
pageIndex: 1, //列表初始頁
list: [], //存放所有數據
},
//加載初始數據；單獨寫個方法，而不直接寫在onLoad裏面，是因爲如果要做下拉刷新操作的話，只需要在觸發下拉刷新操作後，再調用一下這個方法就可以了。
loadInitData() {
var that = this
var pageIndex = 1
var msg = '加載第' + pageIndex + '頁'
wx.showLoading({
title: msg,
})
wx.request({
url: 'xxx.com/Content/test-data/data.json',
method: 'GET',
header: { 'content-type': 'application/json' },
success: function (res) {
console.log(res)
that.setData({
pageIndex: pageIndex,
list: res.data.data
})
console.log(that.data.list)
},
fail: function (res) { },
complete: function (res) {
wx.hideLoading()
},
})
},
//加載更多
loadMore() {
let that = this,
pageIndex = that.data.pageIndex; // 獲取當前頁碼
pageIndex += 1; //加載當前頁的下一頁
let msg = '加載第' + pageIndex + '頁';
wx.showLoading({
title: msg,
})
wx.request({
url: 'xxx.com/Content/test-data/data.json',
header: { 'content-type': 'application/json' },
method: 'GET',
success: function (res) {
//將新一頁的數據添加到原數據後面
let data = res.data.data;
let originList = that.data.list;
let newList = originList.concat(data)
console.log(newList)
that.setData({
pageIndex: pageIndex,
list: newList
})
},
fail: function (res) { },
complete: function (res) {
wx.hideLoading()
},
})
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function () {
var that = this;
that.loadInitData();
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
console.log('觸發下拉刷新')
var that = this
that.loadInitData()
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
console.log('觸發上拉加載')
var that = this
that.loadMore()
}
})
上面這種實現方式對於數據量比較少的頁面是沒有問題，但是如果數據比較大，會有性能問題，因爲小程序setData單次設置的數據大小不得超過1024KB。
所以我們要做些改進來優化代碼，將每一頁請求過來的數據的引用放到一個新的數組listArr集合內。listArr[0]存放第一頁數據，listArr[1]存儲第二頁數據，以此類推。請求新一頁，都只需要更新一組數據，這樣setData的數據就不會超過微信小程序限制的長度。這個方法首先在loadInitData時，清空listArr，防止新數據與原數據衝突。然後將這一頁數據放到listArr[0]中即可。這種實現方法的數據結構是個二維數組 [[{…},{…}],[{…},{…}],…] ； 所以需要注意對wxml中的列表結構進行修改。代碼如下：
wxml
<scroll-view class="scrollview">
<block wx:for="{{listArr}}" wx:key="index" wx:for-item="caption">
<view wx:for="{{caption}}" wx:key="index">
<view class="item">{{item.title}} ({{item.author}})</view>
</view>
</block>
</scroll-view>
js
Page({
/**
* 頁面的初始數據
*/
data: {
listArr:[], //數據集合
pageIndex:1, //展示的當前頁碼
pageSize: 40, //每頁加載的數據量（使用的json數據就是40條，實際工作根據需求來）
pageCount:3, //總頁數(假設的，實際應該是根據後臺返回的數據)
},
//加載初始頁數據
loadInitData(){
var that = this
var pageIndex = 1
if (that.data.pageIndex === 1){
wx.showLoading({
title: '加載中...',
})
}
// 刷新時，清空listArr，防止新數據與原數據衝突
that.setData({
listArr: []
})
//發送請求
wx.request({
url: 'xxx.com/Content/test-data/data.json',
// data: {
// pageIndex: that.data.pageIndex ,
// pageSize: that.data.pageSize
// },
header: { 'content-type': 'application/json' },
method: 'GET',
success: function (res) {
console.log(res)
var tempList = res.data.data
that.setData({
pageIndex: 1,
['listArr['+ (pageIndex-1) +']'] : tempList //動態修改數組某一項的值，需要加中括號
})
console.log(that.data.listArr)
},
fail: function (res) { },
complete: function (res) {
wx.hideLoading();
},
})
},
//加載更多
loadMore(){
var that = this
var pageIndex = that.data.pageIndex
pageIndex += 1
wx.showLoading({
title: '加載第'+ pageIndex +'頁',
})
wx.request({
url: 'xxx.com/Content/test-data/data.json',
header: { 'content-type': 'application/json' },
method: 'GET',
success: function (res) {
//將新一頁的數據添加到原數據後面
let newList = res.data.data;
that.setData({
pageIndex: pageIndex,
['listArr[' + (pageIndex - 1) + ']'] : newList
})
console.log(that.data.listArr)
},
fail: function (res) { },
complete: function (res) {
wx.hideLoading()
},
})
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
this.loadInitData()
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
let that = this
that.loadInitData()
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
let that= this,
pageIndex = that.data.pageIndex,
pageCount = that.data.pageCount;
//當頁面小於總頁數時加載下頁面
if(pageIndex < pageCount){
that.loadMore()
}else{
wx.showToast({
title: '沒有更多數據了',
})
}
}
})
額外的注意點：
問題：在小程序中中我們重寫了上拉加載下拉刷新函數，但是無法觸發；
解決：在json配置文件（可在全局裏也可在當前頁面）中添加 這個代碼段
{ “enablePullDownRefresh”: true }
問題：有時候會碰到觸發了下拉刷新，但看不到那三個小圓點的加載動畫。原因是那三個點的默認顏色爲白色，而當前背景顏色也是白色。
解決：
1、修改背景色；在wxss中添加代碼
page{ background-color: #ebebeb; }
2、修改加載圖標的默認顏色；在json配置文件中添加代碼
{ “backgroundTextStyle”: “dark” }
參考資料：https://www.jianshu.com/p/066c062845e9