change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：
1.autoplay 自动播放导致swiper变化；
2.touch 用户划动引起swiper变化；
3. 其他原因将用空字符串表示
<view class="banner mgb24"> <swiper interval="{{interval}}" duration="{{duration}}" autoplay="{{autoplay}}" circular vertical="{{vertical}}" current="{{current}}" bindchange="swiperChange"> <swiper-item wx:for="{{banner}}" wx:key="ban" bindtap="navigato" data-url="{{item.url}}"> <image src="{{item.image}}" mode="aspectFit"></image> </swiper-item> </swiper> <view class="dot"> <block wx:for="{{banner}}" wx:key="ff"> <view class=‘dottt {{index==swiperCurrent?"active":""}}‘></view> </block> </view> </view>
.banner{ position: relative; width: 100%; height: 290rpx; } .banner swiper{ width:100%; height:250rpx; border-radius:10rpx; } .banner .dot{ display:flex; justify-content:center; width:100%; position:absolute; bottom:16rpx; } .dottt{ width:20rpx; height:8rpx; border-radius:5rpx; background:#eee; margin:0 6rpx; } .active{ background: #59C069!important; }
效果图
以下是我的解决方法：
data:{ swiperCurrent:0, current:0, circular:true, vertical:false, autoplay: true, interval: 3000, duration: 1500, dots:true, } // 轮播图 swiperChange(e){ //普通 // this.setData({ // swiperCurrent: e.detail.current // }) //防止swiper控件卡死 if (this.data.current == 0 && this.data.swiperCurrent>1 ) {//卡死时，重置current为正确索引 this.setData({ current: this.data.swiperCurrent }); } else {//正常轮转时，记录正确页码索引 this.setData({ swiperCurrent: e.detail.current }); } },