评论

关于 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  
点赞 4
收藏
评论

5 个评论

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

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

    2020-06-15
    赞同 1
    回复
  • KevyTian
    KevyTian
    2021-09-29

    欢迎指正:https://blog.csdn.net/c5211314963/article/details/120544382

    2021-09-29
    赞同
    回复 1
    • MXJ
      MXJ
      2023-10-23
      您好用了您的插件很流畅,但是有个问题,有图片的话会闪屏,怎么解决呀?
      2023-10-23
      回复
  • Charlie
    Charlie
    2021-07-30

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

    2021-07-30
    赞同
    回复 1
    • Charlie
      Charlie
      2021-07-30
      高端手机不会,一些低端机会卡
      2021-07-30
      回复
  • 威廉王子
    威廉王子
    2020-12-29

    可以写个代码片段嘛大佬

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

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

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