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
更多关于uni-app nvue中swiper下@touchmove.stop失效,元素拖动触发swiper滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 nvue 页面中,@touchmove.stop 确实可能失效,这是因为 nvue 的渲染机制与 vue 页面不同。nvue 基于原生渲染,手势事件的处理方式有所差异。
问题分析:
- nvue 中,
touchmove事件默认会冒泡到父组件,stop修饰符可能无法完全阻止事件传播。 - swiper 组件内部会监听 touch 事件以实现滚动,当子元素触发 touchmove 时,可能会被 swiper 捕获,导致 swiper 滚动。
解决方案:
-
使用
@touchstart和@touchend替代
在控制条的拖拽元素上,尝试用@touchstart和@touchend结合计算位移来实现拖拽逻辑,避免直接使用@touchmove。 -
动态控制 swiper 的滚动
在拖拽开始时,通过ref获取 swiper 实例,调用swiper.disableTouch()禁用滚动;拖拽结束时,再调用swiper.enableTouch()恢复滚动。 -
调整事件绑定顺序
确保拖拽元素的事件绑定在 swiper 之前,或通过capture修饰符捕获事件。 -
使用
movable-area和movable-view
如果拖拽逻辑复杂,考虑用movable-area和movable-view替代手动拖拽,这两个组件在 nvue 中对手势处理更稳定。
代码调整示例:
<view class="control-dot"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"/>

