微信小程序--swiper轮播图出现抖动问题

发布时间 2023-11-14 09:40:48作者: 小那

问题:在手机上,swiper的item一直在抖动,不滚动了。

官方:

 解决方案:(参考别人的文章,放在离自己的项目代码里)

wxml

<view class="swiperBox" style="{{defaultData.indicatorColors}}">
        <swiper
         class="slide-swiper"
         style="height:{{defaultData.bannerheight}}rpx;"
         indicator-dots="{{false}}"
         autoplay="{{true}}"
         interval="{{interval}}"
         duration="{{duration}}"
         indicator-color="{{defaultData.indicatorColor}}"
         indicator-active-color="{{defaultData.indicatorActiveColor}}"
         current="{{currentSwiper}}"
         bindchange="swiperChange"
        >
            <block wx:for="{{defaultData.src}}" wx:key="s_id">
                <swiper-item data-item="{{item}}">
                    <view class=" swiper-item">
                        <image class="swiper-item-img" src="{{item.imgUrl}}" mode="widthFix" />
                    </view>
                </swiper-item>
            </block>
        </swiper>
        <view class="dots {{defaultData.dotsType}}">
            <block wx:for="{{defaultData.src}}" wx:key="src">
                <view class="dot{{index == currentSwiper ? ' active' : ''}}" />
            </block>
        </view>
    </view>

js

methods: {
    swiperChange: function (e) {
      let { current, source } = e.detail
      if (source === 'autoplay' || source === 'touch') {
        this.setData({
          currentSwiper: current
        })
      }
    },
}