uni-app中动态改变swiper的current

最新推荐文章于 2025-06-14 17:04:56 发布

阿眠

最新推荐文章于 2025-06-14 17:04:56 发布

阅读量8.1k

点赞数 7

CC 4.0 BY-SA版权

文章标签： uni-app

本文链接：https://blog.csdn.net/qq_29184685/article/details/120161758

本文档介绍了在Swiper组件中遇到手动滑动后无法返回第一项的问题及其解决方案。问题源于current属性绑定的currentswiper值未随滑动更新。解决方法包括监听change事件，实时更新currentswiper的值，或者在初始化时设置currentswiper。通过changeswiper方法确保currentswiper与滑动状态同步，从而实现滑块正确重置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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