解决vux的scroller组件无限加载引起的页面性能下降和页面卡顿的问题

最新推荐文章于 2025-06-20 10:29:46 发布

水冰月的小兔子

最新推荐文章于 2025-06-20 10:29:46 发布

阅读量5k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_15385627/article/details/80831657

vue 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了在使用vux的scroller组件实现无限加载功能时遇到的页面性能下降和卡顿问题。通过调整@on-scroll-bottom事件处理，设置状态值避免多次请求，以及切换到@on-pullup-loading用户触发加载，成功减少了请求次数，解决了页面卡死现象。同时，还提到利用pullup-config配置进一步优化了上拉加载的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面列表中需要加入滑动到底部加载新数据的功能，用了vue-scroller中的infinite方法，但还是会有问题，比如有时候上拉加载两次之后就不再加载新数据，目前还没找到解决方案。

因为项目中刚好引用了vux，所以就改用vux的scroller,虽然已不再维护，但基本能满足业务需求。刚开始的使用方法如下：

 <scroller @on-scroll-bottom="infinite" lock-x height="100%">
    <div v-for = "item in 50">滚动内容{{item}}</div>
 </scroller>

用的是@on-scroll-bottom方法，当滑动到底部的时候加载新的数据，但是由于此事件会被多次触发，所以需要一个状态值去判断时候需要继续加载，官方文档中也提到了这一点：

于是在代码中加入状态值去判断是否需要加载数据，但还是在滚动的时候请求了很多次，导致页面卡死。又在第一次请求完之后，调用了此方法：

来停止上拉，发现并不起作用。

然后换一个方法，将scroll-bottom方法换成用户触发的上拉状态，即@on-pullup-loading，然后用状态值去判断是否加载数据，这样每次都是用户触发上拉操作加载新数据，不会有多次请求的问题。

还有一个就是里面pullup-config配置的问题，可以添加如下：

upConfig:{
  content: '上拉加载更多',
  downContent: '上拉加载更多',
  upContent: '上拉加载更多',
  loadingContent: '加载完成',
},