在 uni-app 中使用 nvue 页面时，touchend 事件失效可能是由于以下几个原因导致的。以下是一些可能的解决方案和排查步骤：
1. 检查事件绑定
确保你正确地在 nvue 页面中绑定了 touchend 事件。例如：
<template>
<view @touchend="handleTouchend">
<!-- 内容 -->
</view>
</template>
<script>
export default {
methods: {
handleTouchend(event) {
console.log('touchend event', event);
}
}
}
</script>
2. 检查事件冒泡
nvue 页面中的事件冒泡机制可能与 vue 页面有所不同。确保没有其他元素阻止了事件的冒泡。
3. 检查样式
某些样式可能会影响事件的触发，例如 pointer-events: none; 或者 z-index 的设置。确保你的元素是可点击的。
4. 使用 @touchmove 或 @touchstart
如果 touchend 事件仍然无法触发，可以尝试使用 @touchmove 或 @touchstart 事件来替代或辅助调试。
<template>
<view @touchstart="handleTouchStart" @touchend="handleTouchend">
<!-- 内容 -->
</view>
</template>
<script>
export default {
methods: {
handleTouchStart(event) {
console.log('touchstart event', event);
},
handleTouchend(event) {
console.log('touchend event', event);
}
}
}
</script>
5. 检查 nvue 版本
确保你使用的 uni-app 和 nvue 版本是最新的，因为旧版本可能存在一些已知的 bug。
6. 使用 native 事件
如果上述方法仍然无效，可以尝试使用原生事件来监听 touchend 事件。
mounted() {
const view = this.$refs.myView;
view.addEventListener('touchend', this.handleTouchend);
},
beforeDestroy() {
const view = this.$refs.myView;
view.removeEventListener('touchend', this.handleTouchend);
}
7. 检查平台差异
nvue 在不同平台（如 iOS 和 Android）上的行为可能有所不同。确保在目标平台上进行测试。
8. 使用 uni-app 官方社区
如果问题仍然无法解决，可以尝试在 uni-app 官方社区或 GitHub 仓库中搜索相关问题，或者提交一个新的 issue。
9. 使用 uni-app 的 touch 事件
uni-app 提供了一些内置的 touch 事件，可以尝试使用这些事件来替代 touchend。
<template>
<view @touchstart="handleTouchStart" @touchend="handleTouchend">
<!-- 内容 -->
</view>
</template>
<script>
export default {
methods: {
handleTouchStart(event) {
console.log('touchstart event', event);
},
handleTouchend(event) {
console.log('touchend event', event);
}
}
}
</script>
10. 使用 uni-app 的 touch 事件对象
uni-app 的 touch 事件对象可能与原生事件对象有所不同，确保你正确处理了事件对象。
handleTouchend(event) {
const touches = event.touches;
const changedTouches = event.changedTouches;
console.log('touches', touches);
console.log('changedTouches', changedTouches);
}
