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

1.使用touchstart、touchmove和touchend方法,唤桐在touchstart方法中,获取当前触点位置,然后在touchmove方法中,通过比对当前触点位置和先前记录的培埋触点位置,来判断用户是做左滑动还是右滑动;在touchend方法中,可以根据用户滑动的距离和滑动时间确定最终的滑动 *** 作,从而实现左右滑动功能。

2.使用微信小程序APIswiper,可以在wxml中通过添加swiper元素来实现左右滑动。开发者只需要为swiper指定相关参数(如设置每屏显示的内容、滑动时显示的指示器等),就可以实配链蚂现左右滑动的效果。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存