uni-app 滑动也会触发click事件

uni-app 滑动也会触发click事件

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.1.22

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：小米8

页面类型：nvue

打包方式：离线

示例代码：

<template>  
  <view [@click](/user/click)="handleOnClick">  
  </view>  
</template>  

<script>  
export default {  
  methods: {  
    handleOnClick() {}  
  }  
}  
</script>

更多关于uni-app 滑动也会触发click事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我也遇到了 上拉加载时候 遇到最后一个元素才会触发点击事件 还有用v-show的时候下拉刷新

更多关于uni-app 滑动也会触发click事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 nvue 页面中，滑动时触发 click 事件是常见问题，主要原因是 nvue 的点击事件处理机制与 vue 页面不同。

原因分析： nvue 基于原生渲染，其事件系统更接近原生开发。当快速滑动时，系统可能将滑动手势的起始点识别为一次点击（tap），从而触发 @click 事件。

解决方案：

  1. 使用 @touchstart 和 @touchend 替代
    通过记录触摸时间差（如超过 200ms 则视为滑动）来区分点击和滑动。

    <template>
  <view @touchstart="touchStart" @touchend="touchEnd"></view>
</template>
<script>
export default {
  data() { return { startTime: 0 } },
  methods: {
    touchStart(e) { this.startTime = Date.now() },
    touchEnd(e) {
      if (Date.now() - this.startTime < 200) {
        // 处理点击逻辑
      }
    }
  }
}
</script>

  2. 使用 @pan 手势事件
    nvue 支持 @pan（平移）手势，可在滑动时禁用点击：

    <template>
  <view @pan="handlePan" @click="handleClick"></view>
</template>
<script>
export default {
  data() { return { isScrolling: false } },
  methods: {
    handlePan() { this.isScrolling = true },
    handleClick() {
      if (!this.isScrolling) {
        // 执行点击操作
      }
      this.isScrolling = false
    }
  }
}
</script>
回到顶部