weex-27-通用事件

1DB65BB9-1BDC-44B8-9AE2-3E86862A9942.png

本节学习目标

• 点击事件(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: 触发点击事件时的时间戳
...

部分参数截图

DFC50306-C5CE-411C-A16C-58E8D4ACB284.png

其实<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

简单的使用就介绍到这里

558F171F-A623-4F25-976F-7E86A578AF9B.png