uniapp实现上拉触底刷新功能

最新推荐文章于 2024-04-11 16:00:51 发布

青人长弓

最新推荐文章于 2024-04-11 16:00:51 发布

阅读量3k

点赞数 1

文章标签： javascript 前端 vue.js 小程序

本文链接：https://blog.csdn.net/weixin_55733195/article/details/123041944

版权

上拉触底刷新功能

onReachBottom

页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。可以设置距离底部多少距离拉取数据，在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

代码演示

//fn 定义
fn(e) {
				let that = this
				let http = 'xxx'
				let params = {
					data: `{"tokenStr":xxx"","pageNo":${that.pageNo},"pageSize":5,"status":${this.status}}`
				};
				uni.request({
					url: http,
					data: params,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success(res) {
						console.log(res.data.content)
						let arr = []
						arr = JSON.parse(res.data.content).list
						if (e === 1) {
							arr.forEach(el => {
								that.list.push(el)
							})
							console.log(arr)
						} else {
							that.list = arr
						}
					}
				})

			}
// 调用
	onReachBottom() {
			this.pageNo++
			this.fn(1)
		},