ps:问题 组件swiper(轮播图)真机上不自动滚动 一直卡在那里抖动
以前遇到这个问题,官方一直没有正面回复。就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东西
就一直抖动这个问题,官方更新了一下出现bug的原因,没有具体阐述怎么去解决,但是总体说也给出了一个方案,大家可以去尝试一下是否还出现这个问题。下面是我根据官方,一直找了部分资料做了些处理就不说了,直接贴代码
wxml
<view class="swiper"> <swiper autoplay="true" interval="4000" current="{{swiperCurrent}}" duration="1000" bindchange="swiperChange"> <swiper-item wx:for="{{bannerList}}" wx:key="*this" data-page="activity" data-id="{{item.id}}" data-type="{{item.type}}"> <image src='{{item.pictureUrl}}' class='u-img-slide' ></image> </swiper-item> </swiper> <view class="dots"> <!-- 自定义角标 --> <block wx:for="{{bannerList}}" wx:key="*this"> <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view> </block> </view> </view>
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,大家有更好的方案也可以在文章下评论,我也可以及时去更新,谢谢