vue3 pc端list滚动加载的简单实现

最新推荐文章于 2025-11-12 14:27:25 发布

原创最新推荐文章于 2025-11-12 14:27:25 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

前端学习同时被 2 个专栏收录

6 篇文章

订阅专栏

vue项目中问题总结

6 篇文章

订阅专栏

文章介绍了如何在Vue3应用中实现PC端列表的滚动加载功能，利用scroll事件监听滚动条，结合scrollHeight、scrollTop和clientHeight判断是否滚动到底部，当到达底部时加载更多数据。使用@scroll.passive修饰符能提升滚动的流畅性。

vue3 pc端list滚动加载的简单实现

昨天做了个功能，电脑端list实现滚动加载更多。原理并不难：获取滚动条，根据滚动条的scrollHeight、scrollTop、clientHeight计算出滚动条距底部的距离，如果滚动条滚动到底部，则触发事件。
但是我遇到了一个问题：给ul绑定了class,通过
document.querySelector获取不到ul，后来试了vue的事件@scroll，可以轻松获取到了。

<ul @scroll="handleScroll($event)">
	<li></li>
</ul>

在滚动事件中

//滚动事件
    const handleScroll = (event) => {
      let scrollBottom =// 滚动到底部的距离
                        event.target.scrollHeight -
                        event.target.scrollTop -
                        event.target.clientHeight;
      if(scrollBottom < 1){
        console.log('滚动到底部了')
        if(state.size<state.total){ //判断什么时候调用
          state.size += 10 //通过pageSize增加的方法加载更多数据
          getSearch(state.size) //调用接口方法
        }
      }
    }

到这里，基本功能就实现了。
在绑定的事件后可以加上.passive修饰符，它的作用是：事件的默认行为立即执行，不用等到函数执行完毕。可以让滚动事件更流畅。

<ul @scroll.passive="handleScroll($event)">
	<li></li>
</ul>