uni-app swiper增加circular属性后，改变current为前一个值，会出现连续滑动

uni-app swiper增加circular属性后，改变current为前一个值，会出现连续滑动

示例代码：

<swiper style="height: 500rpx;" :circular="true" :current="current">  
    <swiper-item>  
        <div style="background-color: #ECF5FF;height: 100%;font-size: 80rpx;display:flex;justify-content:center;align-items:center">1</div>   
    </swiper-item>  
    <swiper-item>  
        <div style="background-color: #0077AA;height: 100%;font-size: 80rpx;display:flex;justify-content:center;align-items:center">2</div>   
    </swiper-item>  
    <swiper-item>  
        <div style="background-color: #19BE6B;height: 100%;font-size: 80rpx;display:flex;justify-content:center;align-items:center">3</div>   
    </swiper-item>  
    <swiper-item>  
        <div style="background-color: #C0C4CC;height: 100%;font-size: 80rpx;display:flex;justify-content:center;align-items:center">4</div>   
    </swiper-item>  
</swiper>

操作步骤：

  1. 设置swiper的circular属性为true。
  2. 设置current = current - 1。 (就是让swiper向左边滑动） 然后，就会出现连续滑动，但我设置的是前一个值，滑动一下就好，为何要连续滑动？

如果是current + 1，没有一点问题。

预期结果：

向前滑动一下。

实际结果：

向前连续滑动，最后定格在目标位置处

bug描述：

  1. 设置swiper的circular属性为true。
  2. 设置current = current - 1。 (就是让swiper向左边滑动） 然后，就会出现连续滑动，但我设置的是前一个值，滑动一下就好，为何要连续滑动？

如果是current + 1，没有一点问题。



| 项目信息         | 描述                                         |
|------------------|----------------------------------------------|
| 产品分类         | uniapp/H5                                    |
| PC开发环境       | Windows                                      |
| PC开发环境版本   | Windows 10 专业版/20H2/19042.804             |
| HBuilderX类型   | 正式                                         |
| HBuilderX版本    | 3.2.12                                       |
| 浏览器平台       | Chrome                                       |
| 浏览器版本       | 91.0.4472.77（正式版本） （64 位）           |
| 项目创建方式     | HBuilderX                                    |

更多关于uni-app swiper增加circular属性后，改变current为前一个值，会出现连续滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好 我也是这样，解决了吗。

更多关于uni-app swiper增加circular属性后，改变current为前一个值，会出现连续滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的循环模式下的滑动边界处理问题。当 circular=true 时，swiper 内部会维护一个虚拟的索引映射以实现无缝循环。在向前滑动（current-1）到第一个真实项时，组件需要处理从虚拟项到真实项的切换，这触发了额外的动画过渡。

问题的核心是：在循环模式下，直接修改 current 为前一个值时，swiper 内部可能需要执行两次位置调整（一次虚拟位置跳转，一次动画滑动），导致连续滑动的视觉效果。

解决方案：

  1. 使用 nextTick 延迟设置（推荐）：
import { nextTick } from 'vue' // 或 '@dcloudio/uni-app'

// 在修改 current 前先设置为 -1，再在 nextTick 中设置目标值
this.current = -1
nextTick(() => {
    this.current = targetIndex
})
  1. 使用 swiper 的 change 事件配合标志位：
data() {
    return {
        current: 0,
        changing: false
    }
},
methods: {
    prev() {
        if (this.changing) return
        this.changing = true
        this.current = this.current - 1
    },
    onSwiperChange(e) {
        this.changing = false
    }
}
  1. 使用 CSS 过渡控制（H5端）：
/deep/ .uni-swiper-wrapper {
    transition-duration: 300ms !important;
}
回到顶部