方案1:

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

优点: 每次只加载一张图片, 提高页面载入速度;

缺点: 切换图片不能平滑过渡, 每次切换图片会显示 loading. 同时在白色背景下会闪烁. 改为黑色背景会好很多.

使用方案1之后, 会大大减少页面中 swiper-item 的数量, 但一旦加载多页后, swiper个数多了还是会卡顿, 尤其是在 android 下, 更加明显.

方案2:

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

目前使用了这两个方案后, 用 Android手机测试, 滑动基本上就不卡了.

如果还有其他方案, 欢迎大家探讨.