<div class="my-task-body-inner" ref="scrollContainer" @scroll="handleScroll" style="height: 100%;overflow-y: auto;">
</div>
const scrollContainer = ref(null);
const handleScroll = () => {
if(scrollContainer.value.scrollTop === 0) {
return;
}
if (scrollContainer.value.scrollTop + scrollContainer.value.clientHeight >= scrollContainer.value.scrollHeight) {
console.log('output-> scrollContainer.value.scrollTop:: ', scrollContainer.value.scrollTop)
console.log('output-> scrollContainer.value.clientHeight:: ', scrollContainer.value.clientHeight)
console.log('output-> scrollContainer.value.scrollHeight:: ', scrollContainer.value.scrollHeight)
if(total.value <= payload.value.pageSize) {
message.warning('没有更多数据了');
return;
}
payload.value.pageNum = 1;
payload.value.pageSize = payload.value.pageSize + 10;
getApplicationListFn();
console.log('output-> 到达底部,加载更多数据')
}
}
标签:scrollContainer,滚动,log,output,clientHeight,value,Vue3,scrollTop,加载
From: https://www.cnblogs.com/openmind-ink/p/18346538