uniapp 实现上拉加载

33 篇文章 6 订阅

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)

如有问题,欢迎指正!!!

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值