微信小程序做分页加载数据，会做一些下拉加载更多、然后上拉刷新的操作。数据放在一个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” }
扫描二维码关注公众号，回复： 10675588 查看本文章
参考资料：https://www.jianshu.com/p/066c062845e9
