Weex 提供了通过事件触发动作的能力,例如在用户点击组件时执行 JavaScript。下面列出了可被添加到 Weex 组件上以定义事件动作的属性:
click
当组件上发生点击手势时被触发。
注意:
<input>
和 <switch>
组件目前不支持 click
事件,请使用 change
或 input
事件来代替。
type
: click
target
: 触发点击事件的目标组件timestamp
: 触发点击事件时的时间戳点击按钮,将弹出弹框,再点击弹框 ×
,关闭弹框。
<template> <div> <div> <text class="btn" onclick="openDialog">Show Dialog</text> </div> <div id="dialog" class="dialog" if="{{isShowDialog}}"> <div class="dialog-backdrop"></div> <div class="dialog-content"> <div class="dialog-header"> <text class="dialog-title">{{dialogTitle}}</text> <text class="close" onclick="closeDialog">×</text> </div> <div class="dialog-body"> <text>{{dialogBody}}</text> </div> </div> </div> </div> </template> <style> .dialog-backdrop { opacity: .5; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #000000; } .dialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; justify-content: center; align-items: center; } .dialog-content { width: 450; background-color: #ffffff; } .dialog-header { padding: 20; border-bottom-width: 1; border-bottom-style: solid; border-bottom-color: #efefef; } .dialog-body { padding: 20; } .close { font-size: 50; position: absolute; right: 10; top: 10; } .btn { text-align: center; color: #ffffff; padding: 12; background-color: #3071a9; border-color: #285e8e; border-radius: 4; } </style> <script> module.exports = { data: { isShowDialog: false, dialogTitle: 'HELLO', dialogBody: 'Weex is best!' }, methods: { openDialog: function (e) { this.isShowDialog = true }, closeDialog: function (e) { this.isShowDialog = false } } } </script>
longpress
如果一个组件被绑定了 longpress
事件,那么当用户长按这个组件时,该事件将会被触发。
注意:
<input>
和 <switch>
组件目前不支持 click
事件,请使用 change
或 input
事件来代替。
type
: longpress
target
: 触发长按事件的目标组件timestamp
: 长按事件触发时的时间戳长按按钮,变换背景色。
<template> <div style="width: 400; height: 200; background-color: {{bg}}; justify-content: center; align-items: center;" onlongpress="{{update}}"> <text style="font-size: 60">Press me</text> </div> </template> <script> module.exports = { data: { bg: '#FF0000' }, methods: { update: function () { this.bg = this.bg === '#FF0000' ? '#00FF00' : '#FF0000' } } } </script>
如果一个位于某个可滚动区域内的组件被绑定了 appear
事件,那么当这个组件的状态变为在屏幕上可见时,该事件将被触发。
type
: appear
target
: 触发 Appear 事件的组件对象timestamp
: 事件被触发时的时间戳direction
: 触发事件时屏幕的滚动方向,up
或 down
当滚到最下方时,最后一个 item
出现,将会弹出弹框。
<template> <scroller onviewappear="{{viewappear}}" onviewdisappear="{{viewdisappear}}"> <div class="item"> <text>scroll 1</text> </div> <div class="item"> <text>scroll 2</text> </div> <div class="item"> <text>scroll 3</text> </div> <div class="item"> <text>scroll 4</text> </div> <div class="item"> <text>scroll 5</text> </div> <div class="item"> <text>scroll 6</text> </div> <div class="item"> <text>scroll 7</text> </div> <div class="item"> <text>scroll 8</text> </div> <div class="item"> <text>scroll 9</text> </div> <div class="item"> <text>scroll 10</text> </div> <div class="item" onappear="alertMsg" > <text>I will alert a message when I appeared.</text> </div> </scroller> </template> <style> .list { height: 850; } .count { font-size: 48; margin: 10; } .indicator { height: 40; width: 40; color: #45b5f0; } .row { width: 750; } .item { justify-content: center; border-bottom-width: 2; border-bottom-color: #c0c0c0; height: 200; padding: 20; } </style> <script> var modal = require('@weex-module/modal') module.exports = { data: {}, methods: { alertMsg: function (e) { modal.alert({ message: 'I am appeared.', okTitle: 'Appear' }, function() { }) }, viewappear: function () { nativeLog('>>>>>', 'viewappear') }, viewdisappear: function () { nativeLog('>>>>>', 'viewdisappear') } } } </script>
如果一个位于某个可滚动区域内的组件被绑定了 disappear
事件,那么当这个组件被滑出屏幕变为不可见状态时,该事件将被触发。
type
: disappear
target
: 触发 Disappear 事件的组件对象timestamp
: 事件被触发时的时间戳direction
: 触发事件时屏幕的滚动方向,up
或 down
当向下滚动到第一个 item
消失后,将会弹出弹框。
<template> <scroller onviewappear="{{viewappear}}" onviewdisappear="{{viewdisappear}}"> <div class="item" ondisappear="alertMsg" > <text>I will alert a message when I disappeared.</text> </div> <div class="item"> <text>scroll 1</text> </div> <div class="item"> <text>scroll 2</text> </div> <div class="item"> <text>scroll 3</text> </div> <div class="item"> <text>scroll 4</text> </div> <div class="item"> <text>scroll 5</text> </div> <div class="item"> <text>scroll 6</text> </div> <div class="item"> <text>scroll 7</text> </div> <div class="item"> <text>scroll 8</text> </div> <div class="item"> <text>scroll 9</text> </div> <div class="item"> <text>scroll 10</text> </div> </scroller> </template> <style> .list { height: 850; } .count { font-size: 48; margin: 10; } .indicator { height: 40; width: 40; color: #45b5f0; } .row { width: 750; } .item { justify-content: center; border-bottom-width: 2; border-bottom-color: #c0c0c0; height: 200; padding: 20; } </style> <script> var modal = require('@weex-module/modal') module.exports = { data: {}, methods: { alertMsg: function (e) { modal.alert({ message: 'I am disappeared.', okTitle: 'Disappear' }, function() { }) }, viewappear: function () { nativeLog('>>>>>', 'viewappear') }, viewdisappear: function () { nativeLog('>>>>>', 'viewdisappear') } } } </script>
注意:仅支持 iOS 和 Android,H5 暂不支持。
Weex 通过 viewappear
和 viewdisappear
事件提供了简单的页面状态管理能力。
viewappear
事件会在页面就要显示或配置的任何页面动画被执行前触发,例如,当调用 navigator
模块的 push
方法时,该事件将会在打开新页面时被触发。viewdisappear
事件会在页面就要关闭时被触发。
与组件的 appear
和 disappear
事件不同的是,viewappear
和 viewdisappear
事件关注的是整个页面的状态,所以它们必须绑定到页面的根元素上。
特殊情况下,这两个事件也能被绑定到非根元素的body组件上,例如wxc-navpage
组件。
type
: viewappear
或 viewdisappear
target
: 触发事件的组件对象timestamp
: 事件被触发时的时间戳进出页面时,都会弹框提示。
<template> <scroller onviewappear="{{alertViewappearMsg}}" onviewdisappear="{{alertViewdisappearMsg}}"> <div class="item"> <text>scroll 1</text> </div> <div class="item"> <text>scroll 2</text> </div> <div class="item"> <text>scroll 3</text> </div> <div class="item"> <text>scroll 4</text> </div> <div class="item"> <text>scroll 5</text> </div> <div class="item"> <text>scroll 6</text> </div> <div class="item"> <text>scroll 7</text> </div> <div class="item"> <text>scroll 8</text> </div> <div class="item"> <text>scroll 9</text> </div> <div class="item"> <text>scroll 10</text> </div> <div class="item" onappear="alertMsg" > <text>scroll 11</text> </div> </scroller> </template> <style> .list { height: 850; } .count { font-size: 48; margin: 10; } .indicator { height: 40; width: 40; color: #45b5f0; } .row { width: 750; } .item { justify-content: center; border-bottom-width: 2; border-bottom-color: #c0c0c0; height: 200; padding: 20; } </style> <script> var modal = require('@weex-module/modal') module.exports = { data: {}, methods: { alertViewappearMsg: function () { modal.alert({ message: 'viewappear.', okTitle: 'viewappear' }, function() { }) }, alertViewdisappearMsg: function () { modal.alert({ message: 'viewdisappear.', okTitle: 'viewdisappear' }, function() { }) } } } </script>