评论

关于 swiper 中 数据过多时 滑动卡顿掉帧的解决办法

关于 swiper 中 数据过多时 滑动卡顿掉帧的解决办法

做小程序的时候 使用到了 swiper, 大概15个 <swiper-item> 每个<swiper-item>中是一个展示列表大概100条数据.

发现滑动的时候非常的卡顿掉帧, 苹果手机稍微好点但是也掉帧.

我的解决方式是:

定义2个数组

第一个数组存放所有数据 allList

第二个数组 存放 15个空数组 用于 <swiper-item>循环 list: [[],[],[],[]...]

然后获取当前页 下一页: 当前页+1, 上一页:当前页-1

如果当前页的索引为 0 (说明是第一页) 则上一页为最后一页 = list.length -1

如果当前页的索引为 list.length-1 (说明是最后一页) 则下一页为第一页 = 0

这样判断, 就可以拿到了 上一页 当前页 下一页的索引

然后每次切换页面 动态改变list

{

list [上一页索引] = allList [上一页索引]

list [当前页索引] = allList [当前页索引]

list [下一页索引] = allList [下一页索引]

可选: 可以选择清空之前的数据 例如 清空上上页的数据 这样就可以一直维持 只有3个数组中有数据 swiper就不会卡顿了, 也可以保留达到缓存的效果

}


这样就每次渲染其实只有3个数组中有数据 别的 <swiper-item>为空 就会流畅很多


如果表达不清晰 见谅

最后一次编辑于  2020-06-15  
点赞 3
收藏
评论

4 个评论

  • 小肥羊
    小肥羊
    2020-06-15

    非常好,可以提取出来,写个代码片段吗?非常期待

    2020-06-15
    赞同 1
    回复
  • Charlie
    Charlie
    13小时前

    楼主的这个方法我试过了,数据少的时候确实可行,当数据过百的时候,定义上百个空数组,即使是空数组,循环起来还是会卡

    13小时前
    赞同
    回复 1
    • Charlie
      Charlie
      13小时前
      高端手机不会,一些低端机会卡
      13小时前
      回复
  • 威廉王子
    威廉王子
    2020-12-29

    可以写个代码片段嘛大佬

    2020-12-29
    赞同
    回复
  •         
            
    2020-07-06

    楼主很有想法,期待代码片段

    2020-07-06
    赞同
    回复
登录 后发表内容