uni-app中动态改变swiper的current

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.(也就是上面的方法)

猜你喜欢

转载自blog.csdn.net/qq_29184685/article/details/120161758
今日推荐