uniapp开发小程序swiper轮播疯狂抖动解决办法

979 阅读1分钟

微信小程序息屏或者挂起一段时间打开后,就出现轮播图的疯狂抖动

源代码如下

<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 
    },
}

来源链接:www.dunqie.com/p/4.html