事件与手势

优质

小牛编辑

126浏览

2023-12-01

组件事件

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

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

longpress 当用户长按这个组件时，该事件将会被触发

appear 当组件的状态变为在屏幕上可见时，该事件将被触发

disappear 当组件被滑出屏幕变为不可见状态时，该事件将被触发

Rax 示例

<View onClick={() => {}}>
  ...
</View>

页面事件

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

viewappear 事件会在页面就要显示或配置的任何页面动画被执行前触发

viewdisappear 事件会在页面隐藏时被触发

Rax 示例

let bodyProps = {
  onViewAppear: () => {},
  onViewDisAppear: () => {}
};
let weexDocument = typeof __weex_document__ === 'object' __weex_document__ : typeof document === 'object' document : {};
if (weexDocument && weexDocument.body) {
  setNativeProps(findDOMNode(weexDocument.body), bodyProps);
}

注意 viewappear 和 viewdisappear 事件需要设置在 body 节点上。

事件冒泡

Weex 0.13 版本支持了事件冒泡，事件冒泡默认不开启，需要手动添加 bubble=true 属性到根元素上。

事件冒泡

let bodyProps = {
  bubble: true,
};
let weexDocument = typeof __weex_document__ === 'object' __weex_document__ : typeof document === 'object' document : {};
if (weexDocument && weexDocument.body) {
  setNativeProps(findDOMNode(weexDocument.body), bodyProps);
}

阻止冒泡

<View onClick={(event) => {
	event.stopPropagation();
}}>
  ...
</View>

手势

Weex 封装了原生的触摸事件以提供手势系统。使用手势类似于在 Weex 中使用事件，只需在节点上监听手势即可

目前，仅支持以下四种手势类型：

Touch：当触摸到一个点，移动或从触摸面移开时触发 touch 手势。触摸手势很精准，它会返回所有详细的事件信息。所以，监听 touch 手势可能很慢，即使只移动一丁点也需要处理大量事件。有三种类型的 touch 手势：

touchstart 将在触摸到触摸面上时触发。

touchmove 将在触摸点在触摸面移动时被触发。

touchend 将在从触摸面离开时被触发。

stopPropagation 每个touch事件都会被传递过来, 可控制touch事件是否冒泡（返回true）或者停止（返回false）；用于解决事件冲突或者自定义手势。v0.18+

Pan：pan 手势也会返回触摸点在触摸面的移动信息，有点类似于 touch 手势。但是 pan 手势只会采样收集部分事件信息因此比 touch 事件要快得多，当然精准性差于 touch。pan 也有三种类型的手势，这些手势的意义与 touch 完全一样：

panstart

panmove

panend

horizontalpan v0.10+：手势的 start/move/end 状态保存在 state 特性中。目前该手势在 Android 下会与 click 事件冲突。

verticalpan v0.10+：势的 start/move/end 状态保存在 state 特性中。目前该手势在 Android 下会与 click 事件冲突。

Swipe：swipe 将会在用户在屏幕上滑动时触发，一次连续的滑动只会触发一次 swiper 手势。返回滑动方向 direction，返回值可能为 up, left, bottom, right

LongPress：LongPress 将会在触摸点连续保持 500 ms以上时触发。

touch 和 pan 非常接近，它们的特点可以总结成这样：

Touch：完整信息，精准、很慢

Pan：抽样信息，很快，不够精准

开发者可以根据自己的情况选择合适的手势。