微信小程序息屏或者挂起一段时间打开后,就出现轮播图的疯狂抖动
源代码如下
<swiper class="swiper-ad"
:indicator-dots="false"
:autoplay="autoplay"
:indicator-color="indicatorColor"
:indicator-active-color="indicatorActiveColor"
:circular="circular"
:current="activeIndex"
:previous-margin="list.length>1?previousMargin:0"
:next-margin="list.length>1?nextMargin:0"
@change="handerChange"
:style="{height:height+'rpx'}"
easing-function="linear">
然后通过在动画播放结束后使用(@animationfinish)改变current的值,而不是一滑动(@change)就改变current的值。即用@animationfinish代替 @change。
修改后代码:
<swiper @animationfinish="swiperChange"
class="swiper-ad"
:indicator-dots="false"
:autoplay="autoplay"
:indicator-color="indicatorColor"
:indicator-active-color="indicatorActiveColor"
:circular="circular"
:current="currentSwiper"
:previous-margin="list.length>1?previousMargin:0"
:next-margin="list.length>1?nextMargin:0"
@change="handerChange"
:style="{height:height+'rpx'}"
easing-function="linear">
data() {
return {
activeIndex: 0,
currentSwiper: 0
}
},
methods: {
handerChange: function(e) {
this.activeIndex = e.detail.current;
},
swiperChange: function(e) {
this.currentSwiper = e.detail.current
},
}