uni-app slider在swiper中拖动有问题

uni-app slider在swiper中拖动有问题

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.8

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：mate20X

页面类型：nvue

打包方式：离线

示例代码：

<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay"  :interval="interval" :duration="duration">  
  <swiper-item>  
    <slider value="50" @change="sliderChange" />  
  </swiper-item>  
  <swiper-item>  
    <view class="swiper-item uni-bg-green">B</view>  
  </swiper-item>  
  <swiper-item>  
    <view class="swiper-item uni-bg-blue">C</view>  
  </swiper-item>  
</swiper>

操作步骤：

HBuilderX新建nvue页面，将代码复制到页面中运行到手机模拟器或者真机中，滑动slider

预期结果：

slider滑动效果异常，触发了swiper切换

实际结果：

slider滑动效果异常，触发了swiper切换

bug描述：

在nvue页面使用了uniapp组件的swiper组件，同时在swiper中使用了slider组件。这种情况下回导致slider组件会出现滑动无法顺滑连续，同时触发了swiper的切换效果。 希望的效果是slider在进行滑动的时候不触发swiper的切换效果。滑动能够顺畅。


更多关于uni-app slider在swiper中拖动有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

问题复现，后续优化，已加分，感谢您的反馈！

更多关于uni-app slider在swiper中拖动有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


2024年了兄弟

我遇到了同样的问题，官方什么时候修复呢

此问题继续复现，什么时候修复呢

想问下这个问题有处理方案么? 哪位大佬帮忙给个方案？

什么时候修复呢0.0

我遇到了同样的问题，官方什么时候修复呢

+1 ， 2025年了

这是一个常见的触摸事件冲突问题。在nvue页面中，swiper和slider的触摸事件会相互干扰，导致滑动slider时触发了swiper的页面切换。

解决方案是使用@touchstart和@touchend事件来控制swiper的滑动：

<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">  
  <swiper-item>  
    <slider value="50" [@change](/user/change)="sliderChange" @touchstart="onSliderTouchStart" @touchend="onSliderTouchEnd" />  
  </swiper-item>  
  <swiper-item>  
    <view class="swiper-item uni-bg-green">B</view>  
  </swiper-item>  
  <swiper-item>  
    <view class="swiper-item uni-bg-blue">C</view>  
  </swiper-item>  
</swiper>

export default {
  data() {
    return {
      disableSwiper: false
    }
  },
  methods: {
    onSliderTouchStart() {
      this.disableSwiper = true
    },
    onSliderTouchEnd() {
      this.disableSwiper = false
    }
  }
}

同时给swiper添加:disable-touch="disableSwiper"属性，在slider开始触摸时禁用swiper的触摸事件，结束触摸时恢复。

另一种方案是使用[@touchmove](/user/touchmove)事件阻止冒泡：

<slider value="50" [@change](/user/change)="sliderChange" [@touchmove](/user/touchmove).stop="" />
回到顶部