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

最新推荐文章于 2024-12-10 16:06:33 发布

weixin_46390865

最新推荐文章于 2024-12-10 16:06:33 发布

阅读量756

点赞数 13

文章标签： javascript vue.js 前端 elementui

本文链接：https://blog.csdn.net/weixin_46390865/article/details/140769486

版权

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

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()
}
}
}