页面如果数据很多,会导致加班页面变慢,可以使用触底函数解决这个问题
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)
},
这样就实现了哈,希望对你有所帮助