微信小程序-swiper(轮播图)抖动问题

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,大家有更好的方案也可以在文章下评论,我也可以及时去更新,谢谢

原文地址:https://www.cnblogs.com/zwp06/p/12857459.html