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

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

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

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

//页面源码

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

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

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

最近写小程序经常用swiper,结果发现,坑好多啊。。。

坑1.swiper-item的100%宽高

小程序默认swiper-item的宽高默认继承swiper的宽高,如果不用!important语法根本改不了

如握棚果想要制作不同高度图片的段亮则swiper,则需要事先知道每张图片的高度然后给swiper赋高度值。

swiper-item的宽度也是一个巨坑,想要设置一次展示多个swiper-item可以设置这个属性:display-multiple-items,值为数字。但是这键野样每个item都是紧贴着的。

如果想要做出不紧贴的效果,唯一的方法就是swiper-item留部分白,另一部分放置想要展示的内容

掐指一算,我好久没更新了。。。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12372601.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存