下拉刷新与上拉加载，是移动端项目必不可少的功能，可以方便用户操作，提高用户体验；其中，下拉刷新相当于浏览器中的刷新按钮或F5；而上拉加载则相当于分页加载。
小程序的每个页面都有一个用来注册页面page函数，这个函数参数除了有数据、生命周期以外，还有一些用来监听用户操作页面的相关处理函数——onPullDownRefresh、onReachBottom。
1、下拉刷新onPullDownRefresh
1）在json文件中配置"enablePullDownRefresh": true
- 当下拉时，发送数据请求，此时参数page=1
onPullDownRefresh() {
wx.showNavigationBarLoading();
const that = this;
this.setData({
page: 1,
})
wx.request({
url: 'https://xxx/?page=1',
method: "GET",
success: (res) => {
const { code, data } = res.data;
if( code === 1) {
that.setData({
list: data,
});
}
},
fail: (err) => {
console.log(err)
},
complete: () => {
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
}
})
}
2、上拉加载onReachBottom
onReachBottom () {
const that = this;
// 是否还有更多,来决定是否发送请求
const { curPage, totalPage } = this.data;
if( curPage >= totalPage) {
return false
}
wx.showLoading({
title: '加载中...',
})
this.setData({
page: page + 1,
})
wx.request({
url: `https://xxx/?page=${that.data.page}`,
method: "GET",
success: (res) => {
const { code, data } = res.data;
let newData = []；
if(code === 1) {
that.setData({
list: that.data.list.concat(data);
})
}
},
fail: (err) => {
console.log(err)
},
complete() {
wx.hideLoading();
}
})
}
总结：以上基本可实现下拉刷新和上拉加载功能，但是，上述代码结合实际场景，根据后台返回的数据是否还有下一页来判断是否继续请求数据；此外，上拉加载的页面交互处理也是特别需要注意的。
网友评论