uni-app nvue页面使用swiper子元素使用touchstart事件会影响swiper滑动切换

uni-app nvue页面使用swiper子元素使用touchstart事件会影响swiper滑动切换

操作步骤：

1、在nvue里使用swiper，设置全屏大小并设置垂直滚动。 2、在swiper-item里设置一个充满父元素大小的元素，设置touchstart事件。 3、上下滑动切换swiper就会发现有时候滑不动。

预期结果：

希望里面使用touchstart事件不要影响外层swiper滚动。

实际结果：

swiper里面使用touchstart事件会影响外层swiper滚动。

bug描述：

在nvue页面里使用swiper，swiper里使用touchstart等事件就会影响swiper的滑动切换，有时候会swiper滑动切换会失效，非常不灵敏。测试了几乎所有安卓机都受touch事件影响的。


| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Windows  | window11 | HBuilderX     |
| 手机系统  | 版本号  |              |
| Android  | Android 13 |          |
| 手机厂商  |        | 小米         |
| 手机机型  |        | 安卓手机所有类型 |
| 页面类型  |        | nvue         |
| vue版本  |        | vue3         |
| 打包方式  |        | 云端         |

更多关于uni-app nvue页面使用swiper子元素使用touchstart事件会影响swiper滑动切换的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

您好，麻烦发个可复现demo，以便更好的排查问题

更多关于uni-app nvue页面使用swiper子元素使用touchstart事件会影响swiper滑动切换的实战教程也可以访问 https://www.itying.com/category-93-b0.html


就直接在nuve使用swiper全屏滚动就行了，里面的元素加上touch事件就会受影响，多滑动几次或反方向滑动就会出现卡顿。

回复 1***@qq.com: 你要不发个完整的demo吧

export default { name: ‘LiveNativePlyer’, data() { return { swiperOptions: { isAuto: false, // 是否主动切换下一个直播间 vertical: true, // 是否垂直滚动 circular: true, // 是否循环滚动 duration: 0, // 滚动时间 },

},

methods: { toggleTouch(flag) { this.showTouch = flag },

} } </script>

<style lang="scss" scoped> .pages-live-player-index { position: relative; flex: 1; .swiper { flex: 1; .swiper-item { position: relative; flex: 1; align-items: center; justify-content: center; .swiper-item-wrap { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 99; align-items: center; justify-content: center; flex: 1; padding-top: 200rpx; } } } } </style>

这是一个已知的nvue页面中swiper组件与touch事件冲突的问题。主要原因是swiper-item内的touch事件会捕获手势操作，导致外层swiper的滑动事件被阻断。

解决方案建议：

  1. 使用@touchmove替代@touchstart事件，并添加prevent修饰符：
<view [@touchmove](/user/touchmove).prevent="handleTouch">
  1. 或者使用@pan事件代替touch事件（需要引入手势库）：
<view [@pan](/user/pan)="handlePan">
  1. 如果必须使用touchstart，可以尝试在事件处理函数中返回true：
<view [@touchstart](/user/touchstart)="handleTouchStart" [@touchend](/user/touchend)="handleTouchEnd">
回到顶部