uni-app nvue中swiper下@touchmove.stop失效,元素拖动触发swiper滚动

uni-app nvue中swiper下@touchmove.stop失效,元素拖动触发swiper滚动

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

产品分类:uniapp/App

PC开发环境操作系统:Windows

HBuilderX类型:正式

HBuilderX版本号:3.1.18

手机系统:Android

手机系统版本号:Android 9.0

手机厂商:华为

手机机型:mumu模拟器

页面类型:nvue

打包方式:云端

项目创建方式:HBuilderX


示例代码:

//swiper封装组件,主页面调用

```slot name="left"/slot
```slot name="middle"/slot
```slot name="right"/slot

//视频播放封装组件,control-bar为控制条代码

```video ref="myVideo" id="myVideo" :src="src" :controls="false" enable-progress-gesture="false"  :show-center-play-btn="false" loop autoplay style="width: 750rpx;" :style="{height: screenHeight + 'px'}"  @play="onplay" @error="onerror" @timeupdate="timeupdate" @click="videoClick"/video

更多关于uni-app nvue中swiper下@touchmove.stop失效,元素拖动触发swiper滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue中swiper下@touchmove.stop失效,元素拖动触发swiper滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中,@touchmove.stop 确实可能失效,这是因为 nvue 的渲染机制与 vue 页面不同。nvue 基于原生渲染,手势事件的处理方式有所差异。

问题分析:

  1. nvue 中,touchmove 事件默认会冒泡到父组件,stop 修饰符可能无法完全阻止事件传播。
  2. swiper 组件内部会监听 touch 事件以实现滚动,当子元素触发 touchmove 时,可能会被 swiper 捕获,导致 swiper 滚动。

解决方案:

  1. 使用 @touchstart@touchend 替代
    在控制条的拖拽元素上,尝试用 @touchstart@touchend 结合计算位移来实现拖拽逻辑,避免直接使用 @touchmove

  2. 动态控制 swiper 的滚动
    在拖拽开始时,通过 ref 获取 swiper 实例,调用 swiper.disableTouch() 禁用滚动;拖拽结束时,再调用 swiper.enableTouch() 恢复滚动。

  3. 调整事件绑定顺序
    确保拖拽元素的事件绑定在 swiper 之前,或通过 capture 修饰符捕获事件。

  4. 使用 movable-areamovable-view
    如果拖拽逻辑复杂,考虑用 movable-areamovable-view 替代手动拖拽,这两个组件在 nvue 中对手势处理更稳定。

代码调整示例:

<view class="control-dot" 
      @touchstart="onTouchStart" 
      @touchmove="onTouchMove" 
      @touchend="onTouchEnd"/>
回到顶部