uni-app 事件处理/绑定/传参

事件处理

几乎全支持Vue事件处理（传送门）

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

{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap', //推荐使用longpress代替
    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'
}

注意：

• 为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的 bind 和 catch 进行事件绑定。
• 在 input 和 textarea 中 change 事件会被转为 blur 事件。
• 若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。

事件修饰符

• .stop：阻止单击事件继续传播
• .prevent：提交事件不再重载页面
• .capture：内部元素触发的事件先在此处理，然后才交由内部元素进行处理
• .self：即事件不是从内部元素触发的
• .once：点击事件将只会触发一次
• .passive：滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成，这其中包含 event.preventDefault() 的情况

按键修饰符

uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。

事件绑定 @click

v-on:click 缩写 @click

<template>
	<view class="mine">
		<button type="primary" @click="clicks">click</button>
	</view>
</template>
<script>
export default {
	methods:{
		clicks:function(e){
			console.log(e);
			console.log('click')
		}
	}
}
</script>

事件传参（动态参数演示）

<template>
	<view class="mine">
		<view v-for="(item,index) in list" :key="index">
			<view>{{index}} - {{item.name}} </view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list:[
				{name: '张三',age : 18},
				{name: '李四',age : 18}
			]
		}
	},
	methods:{
		clicks:function(e){
			console.log(e);
			console.log(e.target.id)
		}
	}
}
</script>

整理自 官方文档 和 Lux_Sun