小程序 swiper-item 过多卡顿优化,超级简单!

西梁 2021年11月25日 71次浏览

思路跟网上的只渲染三个item一样。

网上的实现方法居然要写几百行代码去优化,效果还不好。

小程序的 swiper 组件是一次性把所有 swiper-item 都渲染在一个窗口下,看不到的 item 只是渲染在屏幕外面,性能差的手机无法承受一次性那么多 DOM,导致卡顿。

那么只要把当前窗口以及他的上一个和下一个窗口显示出来,其他的DOM隐藏就能达到效果了。

<!-- 这里是 vue 的写法,原生小程序用 hidden 来隐藏其他 DOM -->
<swiper-item v-show="(index === activeKey) || (index === activeKey + 1) || (index === activeKey - 1)">
	<!-- 你的image view -->
</swiper-item>

在使用 swiper 做长列表的场景中(如新闻、短视频),可以只保留 index === activeKey 来实现极致的优化,这样做会损失一些切换动画效果

一行代码就搞定,别把问题想复杂了

另外提一个悲哀的事情,之前的博客数据我找不回来了,有保存数据的可以@我