uni-app swiper数量过多时卡顿优化方案,微信小程序swiper优化

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app swiper数量过多时卡顿优化方案,微信小程序swiper优化相关的知识,希望对你有一定的参考价值。

参考技术A swiper数量达到大约400+时候会出现明显滑动卡顿,渲染慢的问题,达到1000+时候需要几十秒时间,或者可能导致渲染失败。

配置 circular="true" 属性开启衔接滑动,即播放到末尾后重新回到开头。然后固定用于展示的swiper-item只设置3个,当滑动时候去替换展示的数据。这种方法可以展示几千万的数据展示都没问题。

//页面源码

1、swiper-item的key一定要设置,并且用 index 。

2、如果只有一张情况,不想让它来回滚动。可以设置 circular ,但是 circular 无法直接动态设置,我们可以使用 computed 来设置

https://gitee.com/xiaoguoyao/uni-app

以上是关于uni-app swiper数量过多时卡顿优化方案,微信小程序swiper优化的主要内容,如果未能解决你的问题,请参考以下文章

uni swiper卡顿长列表优化

小程序用swiper为啥会有卡顿的问题

优化长列表的swiper

swiper在大数据量时的优化方案

app启动优化,解决空白页或者卡顿太久

虚拟滚动技术 --- 解决加载大量列表DOM导致页面卡顿