mpvue中处理小程序中原创的事件

mpvue中处理小程序事件

mpvue事件处理对应表

// 事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件
{
click: ‘tap’,
touchstart: ‘touchstart’,
touchmove: ‘touchmove’,
touchcancel: ‘touchcancel’,
touchend: ‘touchend’,
tap: ‘tap’,
longtap: ‘longtap’,
longpress: ‘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’
}

上面是事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件

小程序官方事件：

touchstart	手指触摸动作开始	
touchmove	手指触摸后移动	
touchcancel	手指触摸动作被打断，如来电提醒，弹窗	
touchend	手指触摸动作结束	
tap	手指触摸后马上离开	
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）	
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发	
animationstart	会在一个 WXSS animation 动画开始时触发	
animationiteration	会在一个 WXSS animation 一次迭代结束时触发	
animationend	会在一个 WXSS animation 动画完成时触发	
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

举个栗子:
在 mpvue 中，我们可以这样用

    <template>
    	<div @click="clickOne" @longpress="clickLong"></div>
    </template>
    <script>
    	export default {
    		data() {
    			return {}
    		},
    		methods() {
    			clickOne(e) {
    				console.log(e)
    			},
    			clickLong(e) {
    				console.log(e)
    			}
    		}
    	}
    </script>

注意点：现在小程序的长按推荐使用 `longpress`