微信小程序下拉刷新、 上拉加载功能实现
最近开发小程序发现很多页面都是列表, 列表就少不了刷新和加载更多.
所以就有下拉刷新, 上拉加载的需求, 那么我们怎么实现最为便捷呢?
小程序的文档中记载了页面的下拉和上拉事件, 这里提供一下链接小程序文档, 我们可以通过小程序提供的事件来完成我们想要的功能.
- 下拉刷新
onPullDownRefresh() {
// console.info("页面被下拉");
this.setData({
pageNumber: 1, // 把控制页面的pageNumber置为1, 这样刷新就永远是第一页
});
this.Ajax(); // 做一下ajax方法重新获取数据,
setTimeout(() => {
wx.stopPullDownRefresh();
}, 1000);
},
- 上拉加载
onReachBottom() {
console.log(" 拉到底部 ");
if (this.data.List.length % 10 === 0) { // 判断是否是10的倍数才决定是否加载下一页
if (this.data.List.length === this.data.totalRecord) { // 如果List的长度等于接口返回的总长度, return出去
return;
}else { // 否则就是还有下一页数据, 页面加1, 继续加载数据
this.setData({
pageNumber: this.data.pageNumber + 1
});
this.Ajax();
}
}
},
这里说明一下data中的字段:
data: {
List: {}, // 页面的列表数据
pageNumber: 1, // 页面数
totalRecord: 0, // 列表的总长度
},
然后是ajax()方法
Ajax() {
let self = this;
wx.request({
url: commonapi.noticeList,
method: 'GET',
data: {
uid: self.data.uid,
currentPage: self.data.pageNumber, // 第几页的数据
status: -1
},
dataType: 'json',
success: function(res) {
if (res.statusCode === 200) {
// 判断页面是否第一页, 是的话加载数据, 不是则追加数据
if (self.data.pageNumber === 1) {
self.setData({
List: res.data.Data
});
} else {
let count = (self.data.pageNumber - 1) * 10;
for (let i = 0; i < res.data.Data.ListData.length; i++) {
self.setData({
// 逐个写入数据, 这样的话不会导致数据越累越多, setData()负担不起
["List[" + (count + i) + "]"]: res.data.Data.ListData[i]
});
}
}
self.setData({
totalRecord: res.data.Data.TotalRecord,
});
},
fail: function(res) {
},
complete: function(res) {
}
});
}
以上就是我感觉比较容易实现的方法, 不喜勿喷