uni-app nvue监听页面touchend问题：手指未滑动时能触发touchend，滑动时无法触发touchend，且touchmove触发距离很短。

uni-app nvue监听页面touchend问题：手指未滑动时能触发touchend，滑动时无法触发touchend，且touchmove触发距离很短。

示例代码：

<scroll-view scroll-y style="height: 600px;">
<view class="text-area"
@touchstart="coverTouchstart"
@touchmove="coverTouchmove"
@touchend="coverTouchend"> 
<view v-for="i in 100" :key="i" class="a">本页是nvue页面</view>
<text class="title">{{title}}</text>
</view>
</scroll-view>

操作步骤：

  1. 手指点触（无滑动），可以触发touchend
  2. 手机触摸并滑动，无法触发touchend，且touchmove仅生效很小一段距离（约6px） IOS正常

预期结果：

应当连续触发touchmove且触发touchend

实际结果：

  1. 手指点触（无滑动），可以触发touchend
  2. 手机触摸并滑动，无法触发touchend，且touchmove仅生效很小一段距离（约6px） IOS正常

bug描述：

nvue监听页面touchend，当手指没有滑动的时候，会触发touchend,当手指有滑动的时候，无法触发touchend,而且touchmove也只触发很短的距离；


### 表格信息

| 信息类别       | 内容               |
|----------------|--------------------|
| 产品分类       | uniapp/App         |
| PC开发环境     | Windows            |
| PC操作系统版本 | win10              |
| HBuilderX类型  | Alpha              |
| HBuilderX版本  | 3.2.12             |
| 手机系统       | Android            |
| 手机系统版本   | Android 10         |
| 手机厂商       | 华为               |
| 手机机型       | 荣耀V10            |
| 页面类型       | nvue               |
| 打包方式       | 云端               |
| 项目创建方式   | HBuilderX          |

更多关于uni-app nvue监听页面touchend问题：手指未滑动时能触发touchend，滑动时无法触发touchend，且touchmove触发距离很短。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

请提供简单可复现的完整示例（上传附件），方便我们快速排查问题哦。 【正确报bug的姿势】https://ask.dcloud.net.cn/article/38139

更多关于uni-app nvue监听页面touchend问题：手指未滑动时能触发touchend，滑动时无法触发touchend，且touchmove触发距离很短。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是 Android 上 nvue 页面 touch 事件与 scroll-view 滚动冲突的典型问题。在 Android 平台，当 touchmove 事件触发时，如果检测到滚动容器（如 scroll-view），系统会优先处理滚动，导致 touchmove 和 touchend 事件被中断。

你的代码中，touch 事件绑定在 scroll-view 内部的 view 上，当手指滑动距离超过约 6px（系统判定为滚动的阈值）时，Android 会接管事件用于滚动，从而停止向 JS 层传递 touchmove 和 touchend 事件。

解决方案：

  1. 阻止滚动容器的事件接管：在 touchmove 事件处理函数中，调用 event.preventDefault() 可以阻止滚动行为，让 touch 事件继续传递。但注意这会使该区域的滚动失效。
coverTouchmove(event) {
    event.preventDefault() // 阻止滚动，确保touch事件连续触发
    // 你的move逻辑
}
  1. 使用 [@touchmove](/user/touchmove).stop 修饰符：在模板中直接阻止事件冒泡，可能改善部分情况。
<view [@touchmove](/user/touchmove).stop="coverTouchmove">
回到顶部