- 当前 Bug 的表现(可附上截图)
- 预期表现
- 复现路径
- 提供一个最简复现 Demo
wxml页面:
< view class = "banner" >
< swiper class = "bannerswipers" autoplay = " {{ autoplay }} " current = " {{ currentSwiper }} " bindchange = "swiperChange" circular = " {{ circular }} " bindanimationfinish = "changeGoodsSwip" >
< block wx:for = " {{ imgs }} " wx:key = " {{ index }} " >
< swiper-item >
< image src = " {{ item . url }} " ></ image >
</ swiper-item >
</ block >
</ swiper >
<!-- 重置小圆点的样式 -->
< view class = "bannerdots flex alignC flexC" >
< block wx:for = " {{ imgs }} " wx:key = " {{ index }} " >
< view class = "bannerdot {{ index == currentSwiper ? ' banneractive' : '' }} " ></ view >
</ block >
</ view >
</ view >
js相关代码片段:
Page ({
data: {
imgs: [
{ url: '../images/banner1.png' },
{ url: '../images/banner2.png' },
{ url: '../images/banner3.png' }
],
imgSelect: [
{ url: '../images/c.png' , name: '订单开票' },
{ url: '../images/b.png' , name: '扫码开票' },
{ url: '../images/a.png' , name: '我的发票' }
],
currentSwiper: 0 ,
autoplay: true ,
circular: true ,
},
changeGoodsSwip : function ( detail ) {
if ( detail . detail . source == "touch" ) {
//当页面卡死的时候,current的值会变成0
if ( detail . detail . source == "touch" ) {
//防止swiper控件卡死
if ( this . data . currentSwiper == 0 && this . data . preIndex > 1 ) { //卡死时,重置current为正确索引
this . setData ({ currentSwiper: this . data . preIndex });
}
else { //正常轮转时,记录正确页码索引
this . setData ({ preIndex: this . data . currentSwiper });
}
}
}
},
swiperChange : function ( e ) {
this . setData ({
currentSwiper: e . detail . current
})
}
})