<div class="daily-list" ref="list"> <template> <div v-for="(item,index) in arrayItem" :key="index"> <div>{{item}}</div> </div> </template> </div>
data:
arrayItem: 100,
isLoading: false
style:
.daily-list{
width: 300px;
position: fixed;
top: 0;
bottom: 0;
left: 150px;
/* 具备滚动的能力 */
overflow: auto;
border-right: 1px solid #d7dde4;
}
mounted() { // 获取dom const $list = this.$refs.list; // 监听内容的滚动事件 $list.addEventListener('scroll', () => { if (this.isLoading) return; // 已经滚动的距离加页面的高度,等于整个内容区域高度时,视为接触底部 console.log('已经滚动距离',$list.scrollTop); console.log('页面的高度',document.body.clientHeight); console.log('内容区域高度',$list.scrollHeight); if ( $list.scrollTop + document.body.clientHeight >= $list.scrollHeight ) { console.log('到底了'); this.isLoading = true; setTimeout(()=>{ this.arrayItem = 200; this.isLoading = false; },2000) } }); },
或者
<div class="daily-list" ref="list" @scroll="handleScroll">
<template>
<div v-for="(item,index) in arrayItem" :key="index">
<div>{{item}}</div>
</div>
</template>
</div>
methods: {
handleScroll(){
const $list = this.$refs.list;
if (this.isLoading) return;
if
(
$list.scrollTop
+ document.body.clientHeight
>= $list.scrollHeight
)
{
console.log('到底了');
this.isLoading = true;
setTimeout(()=>{
this.arrayItem = 200;
this.isLoading = false;
},2000)
}
}
}