@scroll 滚动监听事件
document.body.clientHeight 页面视口高度
......
<!-- 页面展示 -->
<div ref="pageRef" class="contain_block" @scroll="handleScroll">
<el-backtop :visibility-height="100"/>
<pageIndex v-if="list && list.length" :list="list"/>
<el-empty v-else description="暂无数据"></el-empty>
</div>
.......
......
methods:{
/**
* 监听滚动事件
* 已经滚动的距离+页面的高度=整个内容区高度时,视为接触到底部
* scrollTop 获取到顶部的滚动距离
* scrollBottom 获取到低部的滚动距离
* clientHeight 表示页面视口高度
* scrollHeight 页面内容的高度
*/
handleScroll(){
const $list=this.$refs.pageRef;
//如果数据有在加载中则这次请求退出
if(this.loading) return;
// console.log($list.scrollTop+'<=已经滚动的距离',
// $list.scrollHeight+'<=页面内容的高度',
// document.body.clientHeight+'<=页面视口高度');
const scrollBottom = document.body.clientHeight - $list.scrollHeight - $list.scrollTop;
if($list.scrollTop >= 30 && scrollBottom > 0 && ($list.scrollTop + document.body.clientHeight >= $list.scrollHeight)){
this.loading = true;
setTimeout(()=>{
this.params.currentPage += 1;
this.getList();
this.loading = false;
},2000);
}
},
......
}
......