uniapp 点击事件如何实现

在uniapp中如何实现点击事件？我在页面上添加了@click事件，但是点击后没有任何反应。代码是这样的：

<view [@click](/user/click)="handleClick">点击我</view>

在methods里也定义了handleClick方法：

methods: {
  handleClick() {
    console.log('点击事件触发');
  }
}

但实际点击时控制台没有输出，请问是哪里写错了？需要特别引入什么模块吗？

2 回复

在uniapp中，点击事件使用@click绑定。例如：

<button @click="handleClick">点击我</button>

在methods中定义方法：

methods: {
  handleClick() {
    console.log('按钮被点击了');
  }
}

这样点击按钮就会触发handleClick方法。


在 UniApp 中，点击事件主要通过 @click 或 @tap 绑定到组件上实现。以下是具体方法：

1. 基本用法

在模板中使用 @click 或 @tap（推荐 @tap，兼容性更好）绑定事件处理函数：

<template>
  <view>
    <button @tap="handleClick">点击我</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了');
      uni.showToast({
        title: '点击成功',
        icon: 'none'
      });
    }
  }
}
</script>

2. 传递参数

如果需要传递参数，可以使用内联箭头函数或 data- 属性：

<template>
  <view>
    <button @tap="() => handleClick('参数')">传递参数</button>
    <!-- 或使用 data- 属性 -->
    <button :data-id="123" @tap="handleDataClick">Data参数</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick(param) {
      console.log('收到参数:', param);
    },
    handleDataClick(event) {
      const id = event.currentTarget.dataset.id;
      console.log('Data参数:', id);
    }
  }
}
</script>

3. 阻止事件冒泡

使用 @tap.stop 阻止事件冒泡：

<view @tap="parentClick">
  <button @tap.stop="childClick">不会触发父元素点击</button>
</view>

4. 常用组件支持

@click/@tap 适用于大多数组件，如 view、button、image 等。

注意事项

  • 在 UniApp 中，@tap 是官方推荐的事件类型，比 @click 响应更快。
  • 事件对象可通过 event 参数获取，包含点击坐标等信息。

以上方法简单实用，适用于大部分点击交互场景。

回到顶部