uniapp实现触底添加数据

页面如果数据很多,会导致加班页面变慢,可以使用触底函数解决这个问题

1-在需要使用触底函数的页面pages配置触底刷新onReachBottomDistance

, {
				"path": "页面路径",
				"style": {
					"navigationBarTitleText": "头部标题",
					"onReachBottomDistance": 50, //默认值是50
					"enablePullDownRefresh": false
				}
			},

2-页面第一步肯定是获取后台接口数据之后渲染页面,下面这段代码只是个案例哈,this.$http.post是封装的接口请求

getAcceptdetaillist() {
				this.$http.post("接口名", {
					page: this.form.page,//当前页面
					pagesize: this.form.pagesize,//显示条数
					id: item.id,
					type: item.type
				}).then((res) => {
					this.total = parseInt(res.data.count)
					this.errNum =[...this.errNum,...res.data.list]//这个是重点
					console.log(res, '编号数据!!!!!!!!');
				})
			},

3-重点,触底函数,直接写在methods中,不用在其他生命周期中写

onReachBottom() {
				this.form.page++//当前页++
				var page = Math.ceil(this.total / this.form.pagesize)
				if (this.form.page > page) {
					return
				}
				this.getAcceptdetaillist(this.data)
			},

这样就实现了哈,希望对你有所帮助