PC端是如何触底分页请求新数据的? 这里提供的方法总共分为三个步骤
- 在mounted中添加监听事件处理相应的方法
window.addEventListener('scroll', this.scrollBottom)
- 在methods中添加事件方法,如下代码:
scrollBottom() {
// 变量scrollTop为当前页面的滚动条纵坐标位置
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
// 变量 windowHeight 是可视区的高度
let windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
// 变量 scrollHeight 是滚动条的总高度
let scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;
// 到底的条件
if (
scrollTop + windowHeight == scrollHeight
) {
//到底后要去触发的事件
if (this.page*10 >=this.total) return this.$message('数据加载完毕')
if(this.isLoading)return //控制节流
this.page++
this.getOrderList() //请求数据
}
},
- 需要在vue的生命周期
beforeDestroy
中销毁移除添加的监听事件,防止报错
window.removeEventListener('scroll', this.scrollBottom)
完成以上步骤就完成了触底分页请求!