自己现在做的项目
页面渲染数据列表时需要实现上拉加载下一页的数据,没有找到更好的方法,就利用了原生js监听滚动条的滚动事件实现了。
created(){
window.onscroll = () => {
// 变量scrollTop 是滚动条滚动时距离顶部的距离
var scrollTop = document.documentElement.scollTop || document.body.scrollTop;
// 变量windowHeight 是可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 变量scrollHeight 是滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
// 滚动条到底部的条件
if(scrollTop + windowHeight == scrollHeight){
if( this.currentList.length <10 ){ // 如果当前获取到的数据列表长度小于10则不用再请求
return
}
}eles{ // 继续请求数据
this.pageNumber++
this.refresh()
}
}
}