本节学习目标
- 点击事件(click)
- 长按手势(longpress)
- appear 出现事件
- Disappear 消失事件
- viewappear 事件
- viewdisappear 事件
接下来我们一个一个介绍
- 点击事件
click
示例如下
<div @click="tap">默认参数</div>
<div @click="tap('你好')" >传递常量参数<div>
<div @click="tap(index)" >传递变量参数<div>
<div @click="tap(index,value)" >传递多个参数<div>
如上示例中定义的单击事件方法tap中,如果不传递参数,即使用默认参数的情况,系统会自动传递如下对象当成方法的参数
type: click
target: 触发点击事件的目标组件
timestamp: 触发点击事件时的时间戳
...
部分参数截图
其实<div @click="tap">默认参数</div> 的完整写法为`<div @click="tap($event)">默认参数</div>``
?思考:如果你既要传递自己的参数,又要保留系统参数,应该怎么写?
@longpress="longpress(index,$event)"
- 长按事件
longpress
<div @longpress="longpress(index)"></div>
<div @longpress="longpress"></div>
longpress事件默认参数为
type : longpress
target : 触发长按事件的目标组件
timestamp : 长按事件触发时的时间戳
...
参数用法同上
- appear 事件
appear
给组件绑定appear事件,那么当这个组件出现在屏幕上时，该事件将被触发
示例
<text class="text" v-if="index==25" @appear="appear(index)">绑定了appear</text>
事件参数
type : appear
target : 触发 Appear 事件的组件对象
timestamp : 事件被触发时的时间戳
direction : 触发事件时屏幕的滚动方向，up 或 down
...
-
disappear事件
disappear
当一个组件绑定了 disappear
事件，那么当这个组件被滑出屏幕变为不可见状态时，该事件将被触发。
事件对象
type : disappear
target : 触发 Disappear 事件的组件对象
timestamp : 事件被触发时的时间戳
direction : 触发事件时屏幕的滚动方向，up 或 down
示例如下
<text class="text" v-else-if="index==3" @disappear="disappear(index)">绑定disappear</text>
- viewappear事件
viewappear
该事件将会在打开新页面时被触发(如push一个新的页面)
该事件必须绑定在根节点上如下
<template>
<div class="page" @viewappear="viewappear" @viewdisappear='viewdisappear'>
</div>
</template>
事件对象
type : viewappear
target : 触发事件的组件对象
timestamp : 事件被触发时的时间戳
...
- viewdisappear
viewdisappear
该事件将会在页面关闭时触发(如pop)
该事件也必须绑定在根节点上
<template>
<div class="page" @viewdisappear='viewdisappear'>
</div>
</template>
事件对象
type : viewdisappear
target : 触发事件的组件对象
timestamp : 事件被触发时的时间戳
注意事项
- <input> 和 <switch> 组件 不支持click或者longpress 事件,事件 请使用 change 或 input 事件来代替
- H5 不支持 viewdisappear 和 viewappear
简单的使用就介绍到这里