通用事件

Weex 提供了通过事件触发动作的能力,例如在用户点击组件时执行 JavaScript。下面列出了可被添加到 Weex 组件上以定义事件动作的属性:

click

当组件上发生点击手势时被触发。

注意:

<input><switch> 组件目前不支持 click 事件,请使用 changeinput 事件来代替。

事件对象

  • type: click
  • target: 触发点击事件的目标组件
  • timestamp: 触发点击事件时的时间戳

longpress

如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。

注意:

<input><switch> 组件目前不支持 click 事件,请使用 changeinput 事件来代替。

事件对象

  • type : longpress
  • target : 触发长按事件的目标组件
  • timestamp : 长按事件触发时的时间戳

Appear 事件

如果一个位于某个可滚动区域内的组件被绑定了 appear 事件,那么当这个组件的状态变为在屏幕上可见时,该事件将被触发。

事件对象

  • type : appear
  • target : 触发 Appear 事件的组件对象
  • timestamp : 事件被触发时的时间戳
  • direction : 触发事件时屏幕的滚动方向,updown

Disappear 事件

如果一个位于某个可滚动区域内的组件被绑定了 disappear 事件,那么当这个组件被滑出屏幕变为不可见状态时,该事件将被触发。

事件对象

  • type : disappear
  • target : 触发 Disappear 事件的组件对象
  • timestamp : 事件被触发时的时间戳
  • direction : 触发事件时屏幕的滚动方向,updown

Page 事件

注意:仅支持 iOS 和 Android,H5 暂不支持。

Weex 通过 viewappearviewdisappear 事件提供了简单的页面状态管理能力。

viewappear 事件会在页面就要显示或配置的任何页面动画被执行前触发,例如,当调用 navigator 模块的 push 方法时,该事件将会在打开新页面时被触发。viewdisappear 事件会在页面就要关闭时被触发。

与组件的 appeardisappear 事件不同的是,viewappearviewdisappear 事件关注的是整个页面的状态,所以它们必须绑定到页面的根元素上

特殊情况下,这两个事件也能被绑定到非根元素的body组件上,例如wxc-navpage组件。

事件对象

  • type : viewappearviewdisappear
  • target : 触发事件的组件对象
  • timestamp : 事件被触发时的时间戳

示例

  1. <template>
  2. <div>
  3. <divclass="box" @click="onclick" @longpress="onlongpress" @appear="onappear" @disappear="ondisappear"></div>
  4. </div>
  5. </template>
  6. <script>
  7. const modal = weex.requireModule('modal')
  8. exportdefault{
  9. methods:{
  10. onclick (event){
  11. console.log('onclick:', event)
  12. modal.toast({
  13. message:'onclick',
  14. duration:0.8
  15. })
  16. },
  17. onlongpress (event){
  18. console.log('onlongpress:', event)
  19. modal.toast({
  20. message:'onlongpress',
  21. duration:0.8
  22. })
  23. },
  24. onappear (event){
  25. console.log('onappear:', event)
  26. modal.toast({
  27. message:'onappear',
  28. duration:0.8
  29. })
  30. },
  31. ondisappear (event){
  32. console.log('ondisappear:', event)
  33. modal.toast({
  34. message:'ondisappear',
  35. duration:0.8
  36. })
  37. }
  38. }
  39. }
  40. </script>
  41. <stylescoped>
  42. .box {
  43. border-width:2px;
  44. border-style: solid;
  45. border-color:#BBB;
  46. width:250px;
  47. height:250px;
  48. margin-top:250px;
  49. margin-left:250px;
  50. background-color:#EEE;
  51. }
  52. </style>