1.page.json中,将 enablePullDownRefresh 设置为 true
{
"path": "pages/home/communityNews",
"style": {
"navigationBarTitleText": "社区动态",
"enablePullDownRefresh": true
}
}
2.触发上拉加载的方法 onReachBottom:
onLoad() {
uni.showNavigationBarLoading();
this.getScrollList(this.currentPage, this.currentSize, 2);
},
onReachBottom() {
this.currentPage++;
if (this.currentPage > this.totalPage) {
uni.hideNavigationBarLoading();
uni.showToast({
title: '暂无更多数据'
})
} else {
this.getScrollList(this.currentPage, this.currentSize, 2);
}
},
getScrollList(current, size, articleType) {
getScrollList(current, size, articleType).then(res => {
const code = res.data.code;
if (code === 100) {
this.totalPage = res.data.data.pages;
if (this.currentPage == 1) {
this.cardArr = res.data.data.records;
} else {
this.cardArr = this.cardArr.concat(res.data.data.records);
}
uni.hideNavigationBarLoading()
} else {
uni.showToast({
title: res.data.msg
})
}
}).catch(err => {
console.log(err);
})
},
注意:下滑加载是需要数据占满整个页面高度才能触发,此处可修改触发条件
pages.json中设置
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"app-plus": {
"background": "#efeff4"
},
"onReachBottomDistance": 150 //距离底部150上滑有效
},
上拉加载可见 https://blog.csdn.net/weixin_50606255/article/details/118493446(代码完整,与此篇类似,共用同一个template和css)
如有问题,欢迎指正!!!