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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

学习前端第6周第4天

642
来自专栏happyJared

IDEA快捷键拆解系列(十五):经验篇

  本文整理了一些博主本人在学习工作中比较常用到的快捷键,有需要的可以参考一下,也欢迎留言补充。

1201
来自专栏快乐八哥

让IE7/8使用CSS中first-child和last-child样式属性

项目最终效果如下图所示: ? 可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最...

1938
来自专栏无原型不设计

Mockplus组件样式库一键解决风格复用

在Mockplus3.3版本中,新增了组件样式库,可以快速复用组件风格,同时可以将组件风格保存到库中。

23210
来自专栏从零开始学自动化测试

Selenium2+python自动化35-获取元素属性

前言 通常在做断言之前,都要先获取界面上元素的属性,然后与期望结果对比。本篇介绍几种常见的获取元素属性方法。 一、获取页面title 1.有很多小伙伴都不知道t...

3315
来自专栏专业duilib使用+业余界面开发

duilib中获取的控件的位置或者大小不对的可能的原因

2204
来自专栏coding

vue.js组件切换

872
来自专栏拂晓风起

Firefox显示中文字太小的问题 (改变Firefox最小字体)

1804
来自专栏Android干货

小程序实践(九):返回到上一个界面并传值回去

常见需求,修改某个信息,需要调到一个新界面有个输入框去修改内容,修改之后,点击后退按钮,新的数据就返回更新了

1673
来自专栏coding

v-if与v-show实例

1534

扫码关注云+社区