swiper滑块手动滑动后无法回到第一个
原因:current属性绑定的值(currentswiper)没有随着swiper的滑动而改变
解决办法:监听滑块change事件,手动给currentswiper赋值
<template>
<view>
<swiper @change="changeswiper" :current="currentswiper" class="swiper" circular indicator-dots="indicatorDots" >
<swiper-item v-for="(item,index) in 9">
<view class="swiper-item uni-bg-red">
<text>{
{item}} </text>
</view>
</swiper-item>
</swiper>
<button @click="initcurrent ">滑块滑动后点击这个按钮重置current的值</button>
</view>
</template>
<script>
export default {
data() {
return {
currentswiper: 0
}
},
methods: {
initcurrent () { //swiper回到第一个
this.currentswiper = 0
},
changeswiper(e){ // 得加上这个方法!!!
this.currentswiper = e.detail.current
}
}
}
changeswiper方法是为了在swiper改变时实时的更新currentswiper 的值,如果不加这个方法手动滑动时currentswiper 不会随着滑动而改变会一直为0(初始值),因为currentswiper 值没有改变initcurrent 方法就不会生效swiper就不会回到第一个滑块
官方文档是这么说的
官方提供了两种解决办法(以swiper为例)
一:监听change事件,记录下当前的current的值this.old = e.detail.current ,在调用initcurrent方法重置滑块的时候先给currentswiper 赋值为old 的值,后再重置currentswiper 为0.
二:监听change事件,当current的值改变时把current的值赋给currentswiper ,然后再重置currentswiper 为0.(也就是上面的方法)