微信小程序--swiper轮播图出现抖动问题
问题:在手机上,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
})
}
},
}