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

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

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

 
    
滚动内容{{item}}

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

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

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


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

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

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

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

你可能感兴趣的:(vue)