版权声明: https://blog.csdn.net/GoldenLegs/article/details/82183131
1.利用原生document滚动原理
data:{
onFetching:false, //防止页面滑动时多次加载
page:0, //滑动次数or加载数据的页数
},
mounted(){
this.loadlist=function(){
//axios请求和数据赋值
}
document.addEventListener('scroll',this.scrollLoad)
},
methods(){
scrollLoad(){
let scrollHeight= document.documentElement.scrollHeight || document.body.scrollHeight; //document的滚动高度
let nowScotop = document.documentElement.clientHeight || document.body.clientHeight; //可视区高度
let wheight= document.documentElement.scrollTop || document.body.scrollTop; //已滚动高度
if (this.onFetching) {
// do nothing
} else {
if (nowScotop >= scrollHeight - wheight-5 ) {
this.onFetching = true
setTimeout(() => {
this.page+=1
this.loadlist() //加载列表的请求方法
this.onFetching = false
}, 500)
}
}
}
}