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