常见问题
分享创造价值 合作实现共赢

常见问题

当前位置:主页 > 常见问题 >

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

发布时间:2019-04-09 09:17作者:admin来源:未知点击:

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

方案1:

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

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

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

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

方案2:

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

目前使用了这两个方案后, 用 Android 香港最快开奖现场直播18码中特,www.16668.com测试, 滑动基本上就不卡了.

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

TOP

18910140161