监听滚动事件,实现列表分页

监听滚动事件,实现列表分页

element+Vue3表格中没有滚动到底部,别表刷新的的api,这时候我们需要手动的去监听滚动事件,当滚动到底部时,触发请求事件代码如下:

onMounted(()=>{
nextTick(()=>{
const scroll = document.querySelector(‘.el-scrollbar__wrap’) /给元素添加滚动监听事件/
scroll.addEventListener(‘scroll’,handleScroll);
})
})
onBeforeUnmount(() => { /* 解绑滚动监听 */
const scroll = document.querySelector(‘.el-scrollbar__wrap’)
scroll.removeEventListener(‘scroll’,handleScroll);
});

const handleScroll = ()=>{ /** 滚动到底部刷新数据 */
const scroll = document.querySelector(‘.el-scrollbar__wrap’)
const { scrollTop, scrollHeight, clientHeight } = scroll
if (scrollTop + clientHeight >= scrollHeight) {
if (state.queryForm.pageNo * state.queryForm.pageSize < state.queryForm.total) {
state.queryForm.pageNo++
setAgent()
}
}
}