出售本站【域名】【外链】

swiper(轮播图)抖动问题

文章正文
发布时间:2024-07-19 07:17

ps:问题 组件swiper(轮播图)实机上不主动转动 接续卡正在这里颤抖

以前逢到那个问题,官方接续没有正面回复。就搁置了,不过有大半年没写小步调了也没去关注,原日就去看了下官方文档,发觉更新了点好东西

就接续颤抖那个问题,官方更新了一下显现bug的起因,没有详细阐述怎样去处置惩罚惩罚,但是总体说也给出了一个方案,各人可以去检验测验一下能否还显现那个问题。下面是我依据官方,接续找了局部量料作了些办理就不说了,间接贴代码

wVml

<ZZZiew> <swiper autoplay="true" interZZZal="4000" current="{{swiperCurrent}}" duration="1000" bindchange="swiperChange"> <swiper-item wV:for="{{bannerList}}" wV:key="*this" data-page="actiZZZity" data-id="{{item.id}}" data-type="{{item.type}}"> <image src='{{item.pictureUrl}}' ></image> </swiper-item> </swiper>   <ZZZiew>   <!-- 自界说角标 --> <block wV:for="{{bannerList}}" wV:key="*this"> <ZZZiew></ZZZiew> </block> </ZZZiew> </ZZZiew>

 js

swiperChange(e) { let {current, source} = e.detail if(source === 'autoplay' || source === 'touch') { //依据官方 source 来停行判断swiper的change变乱是通过什么来触发的,autoplay是主动轮播。touch是用户手动滑动。其余的便是未知问题。颤抖问题次要由于未知问题惹起的,所以作了限制,只要正在主动轮播和用户自动触发才去扭转current值,抵达避让了颤抖bug this.setData({ swiperCurrent: current }) } },

 次要是为了避让轮播颤抖的bug,各人有更好的方案也可以正在文章下评论,我也可以实时去更新,谢谢