小程序分页加载
简易版的数据分页加载,滚动加载下一页
初始数据:
data: {
page: 1, // 第几页
hasMoreData: true, // 下一页是否还有新数据(默认有下一页数据)
dataList: [] // 数据列表
}
如果接口会返回类似标志字段这里就不用自己定义了。
新页加载事件:
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if(!this.data.hasMoreData) {
return;
}
this.data.page ++;
wx.showLoading({
title: '',
mask: true
})
this.getDataList();
}
如果还有新数据,将页数加一,请求接口获取下一页数据,否则返回。
请求接口:
// 获取数据列表
getDataList() {
if (!this.data.hasMoreData) {
return;
}
const params = {
id: this.options.id,
page: this.data.page
}
return app.$api.getDataList(params).then(res => {
if (res.status == 1) {
let resData = res.data || [];
if (!resData.length) {
this.setData({
hasMoreData: false
})
}
resData = this.data.complainList.concat(resData);
this.setData({
dataList: resData
})
wx.hideLoading();
}
})
}
将当前数据列表与新的返回数据进行连接操作,渲染新列表。如果没有新数据将
hasMoreData
设置为false
,避免下拉到底一直请求接口。
有tab切换时要重置数据