uniapp 实现上拉加载

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）

如有问题，欢迎指正！！！