在做一个浏览图片的小程序, 页面中含有多个 swiper, 翻页多了之后滑动卡的很. 但又想在首页中展示大图轮播和自动翻页, 尝试过多个方案, 最终实现如下:
方案1:
减少单条记录中 swiper 个数, 只保留3个. 在 onChange 时切换图片.
优点: 每次只加载一张图片, 提高页面载入速度;
缺点: 切换图片不能平滑过渡, 每次切换图片会显示 loading. 同时在白色背景下会闪烁. 改为黑色背景会好很多.
使用方案1之后, 会大大减少页面中 swiper-item 的数量, 但一旦加载多页后, swiper个数多了还是会卡顿, 尤其是在 android 下, 更加明显.
方案2:
通过wx.createIntersectionObserver()来监测当前页面中显示元素, 使用二维数组分页之后, 可以控制只让当前显示页来使用 swiper 来轮播, 其他已经翻过去的页面都可以设置为组图中的单张图片(或者直接设置成空白占位). 这样可以保证基本上只有一个 pageSize 页面中含有 swiper(最多两个页面, 在翻页交界过程中监测都在当前屏幕中显示), 能大大减少卡顿.
目前使用了这两个方案后, 用 Android手机测试, 滑动基本上就不卡了.
如果还有其他方案, 欢迎大家探讨.
第二种方案岂不是在滑动的快的情况下,一开始看见的是背景,等他渲染之后才能看见图片?
试一下虚拟slide
多谢建议, 去学习一下.
不知道官方解决没有,swiper卡顿问题