1
收藏

列表中多个 swiper 优化方案探讨

列表中多个 swiper 优化方案探讨

在做一个浏览图片的小程序, 页面中含有多个 swiper, 翻页多了之后滑动卡的很. 但又想在首页中展示大图轮播和自动翻页, 尝试过多个方案, 最终实现如下:

方案1:
减少单条记录中 swiper 个数, 只保留3个. 在 onChange 时切换图片.

优点: 每次只加载一张图片, 提高页面载入速度;
缺点: 切换图片不能平滑过渡, 每次切换图片会显示 loading. 同时在白色背景下会闪烁. 改为黑色背景会好很多.
使用方案1之后, 会大大减少页面中 swiper-item 的数量, 但一旦加载多页后, swiper个数多了还是会卡顿, 尤其是在 android 下, 更加明显.

方案2:
通过wx.createIntersectionObserver()来监测当前页面中显示元素, 使用二维数组分页之后, 可以控制只让当前显示页来使用 swiper 来轮播, 其他已经翻过去的页面都可以设置为组图中的单张图片(或者直接设置成空白占位). 这样可以保证基本上只有一个 pageSize 页面中含有 swiper(最多两个页面, 在翻页交界过程中监测都在当前屏幕中显示), 能大大减少卡顿.

目前使用了这两个方案后, 用 Android手机测试, 滑动基本上就不卡了.
如果还有其他方案, 欢迎大家探讨.

最后一次编辑于  04-05  (未经腾讯允许,不得转载)
收藏赞 1

2 个评论

  • 我的天
    我的天

    试一下虚拟slide

    赞同 0没有帮助
    评论 1
    复制
    04-22
    • 水中的鱼
      水中的鱼

      多谢建议, 去学习一下.

      赞同 0没有帮助
      回复
      复制
      04-22
    评论
  • Mr.time
    Mr.time

    不知道官方解决没有,swiper卡顿问题

    赞同 0没有帮助
    评论 0
    复制
    04-11