Uni-App - 事件处理、事件绑定、事件传参

uni-app 事件

事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件

{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap',
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'

}

在 input 和 textarea 中 change 事件会被转为 blur 事件。

踩坑注意:

上列表中没有的原生事件也可以使用,例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在handleProxy 中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regiοnchange="functionName" @end="functionName" @begin="functionName"><map>
平台差异所致,bind 和 catch 事件同时绑定时候,只会触发 bind ,catch 不会被触发,要避免踩坑。

事件修饰符

stop 的使用会阻止冒泡,但是同时绑定了一个非冒泡事件,会导致该元素上的 catchEventName 失效!
prevent 可以直接干掉,因为uni-app里没有什么默认事件,比如 submit 并不会跳转页面
self 没有可以判断的标识
once 也不能做,因为uni-app没有 removeEventListener, 虽然可以直接在 handleProxy 中处理,但非常的不优雅,违背了原意,暂不考虑
按键修饰符:uni-app运行在手机端,没有键盘事件,所以不支持按键修饰符。
 

事件绑定 @click

<template>
 <view class="demo" @click="clickTest" @longtap="longtap"></view>
</template>
<script>
export default {
 methods:{
  clickTest: function(e){
   console.log(e);
   console.log('click');
  },
  longtap: function(e){
   console.log(e);
   console.log('longtap');
  }
 }
}
</script>
<style>
.demo{width:500px; margin:50px auto; background:#8F8F90; height:500px;}
</style>

注意在小程序中观察对应事件对象,可以利用此对象获取更多信息。

事件传参(动态参数演示)

<template>
 <view>
   <view v-for="(item, index) in students" class="persons" @click="menuClick" v-bind:id="index">{{index}} - {{item.name}}</view>
 </view>
</template>
<script>
export default {
 data: {
  students : [
   {name : "张三", age : 18},
   {name : "李四", age : 20}
  ]
 },
 methods:{
 menuClick : function(e){
  console.log(e);
  console.log(e.target.id);
 }
 },
}
</script>
<style>
.persons{width:750px; line-height:2.2em;}
</style>
<think>好的,我现在需要回答用户关于如何在uni-app微信小程序中实现点击事件的问题。首先,用户提到的upp-app可能是指基于uni-app开发的小程序,所以应该按照uni-app的语法来处理。 用户提供的引用中,引用[1]提到uni-app可以发布到多个平台,包括微信小程序,因此需要确保代码符合uni-app的跨平台规范。引用[2]是关于ARM部分的调试代码,可能和前端点击事件关系不大,但需要注意数据处理的正确性,比如事件处理函数中如何获取和操作数据。 首先,uni-app使用Vue.js的语法,所以点击事件应该用@click绑定。在微信小程序中,原生开发使用的是bindtap,但在uni-app中统一使用@click,这样编译到不同平台时会自动转换。 接下来,我需要给出一个示例,展示如何在模板中绑定点击事件,并在methods中定义处理函数。例如,在按钮上添加@click="handleClick",然后在methods里写handleClick函数,可能会用到event对象获取相关信息。 另外,需要注意uni-app事件传参方式。不能直接在@click中带参数,而是需要通过data-属性传递,然后在event.target.dataset中获取。例如,使用data-id="123",然后在处理函数中通过event.currentTarget.dataset.id获取参数值。 用户可能还希望知道如何修改数据或跳转页面,所以示例中可以包括更新data中的变量和使用uni.navigateTo进行页面跳转。 最后,需要确保示例代码正确,符合uni-app的结构,比如包含template、script和style部分,并且使用export default导出组件。同时,提醒用户注意事件对象的兼容性问题,尤其是在跨平台时,不同平台可能有细微差异,建议使用uni-app的API处理。 总结步骤: 1. 使用@click绑定事件 2. 在methods中定义处理函数 3. 处理函数可以接收event参数,通过dataset获取传递的数据 4. 在函数中更新数据或执行其他操作,如页面跳转 5. 提供完整的示例代码,确保语法正确</think>在uni-app微信小程序中实现点击事件,主要通过Vue.js的@click事件绑定语法实现。以下是具体实现方法和示例: ### 一、基础点击事件实现 1. 在模板中使用`@click`绑定事件 ```html <template> <view> <!-- 按钮点击事件 --> <button @click="handleClick">点击我</button> <!-- 带参数的事件传递 --> <view @click="handleParamClick('参数')">带参数点击</view> <!-- 使用data-*属性传递参数 --> <view data-id="123" data-info="test" @click="handleDatasetClick"> 带数据集点击 </view> </view> </template> ``` 2. 在script中定义事件处理函数 ```javascript <script> export default { methods: { // 基础点击事件 handleClick(event) { console.log('点击事件触发', event) uni.showToast({ title: '点击成功' }) }, // 直接传递参数 handleParamClick(param) { console.log('收到参数:', param) }, // 通过dataset获取参数 handleDatasetClick(event) { const dataset = event.currentTarget.dataset console.log('数据集参数:', dataset.id, dataset.info) } } } </script> ``` ### 二、事件对象关键属性说明 1. `event.type`:事件类型(如tap) 2. `event.timeStamp`:事件触发时间戳 3. `event.target`:触发事件的组件属性集合 4. `event.currentTarget`:当前组件属性集合 5. `event.detail`:额外信息(如input事件的值) ### 三、最佳实践建议 1. **事件节流**:对高频点击事件添加防抖处理 ```javascript methods: { handleClick: _.debounce(function() { // 业务逻辑 }, 500) } ``` 2. **跨平台兼容**:使用`uni.$on`/`uni.$emit`进行跨页面事件通信[^1] 3. **性能优化**:避免在模板中直接写复杂表达式,建议提前处理数据 ### 四、完整示例代码 ```html <template> <view class="container"> <button class="my-button" @click="handleCounterClick" > 点击计数 {{ counter }} </button> <view v-for="item in list" :key="item.id" @click="handleListItemClick(item.id)" > {{ item.text }} </view> </view> </template> <script> export default { data() { return { counter: 0, list: [ { id: 1, text: '选项1' }, { id: 2, text: '选项2' } ] } }, methods: { handleCounterClick() { this.counter++ uni.vibrateShort() // 添加触觉反馈 }, handleListItemClick(id) { uni.navigateTo({ url: `/pages/detail?id=${id}` }) } } } </script> <style> .my-button { margin: 20rpx; padding: 20rpx; background-color: #007AFF; color: white; } </style> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陆克和他的那些代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值