一、描述

rax-gesture-view 是 rax 提供的创新体验组件,支持简单的手势移动事件,实际上是对 onTouchstart 这 onTouchend 这种移动手势进行了封装,会自动的去监听 touch 事件。

因此 rax-gesture-view 本身只需要两个 props :

  • onHorizontalPan: 监听水平滑动手势
  • onVerticalPan: 监听垂直滑动手势

二、方法参数

无论是 onHorizontalPan 还是 onVerticalPan,都有一个参数 event,这个参数实际上就是 TouchEvent,一般用到的属性是 event.stateevent.changedTouches

其中 event.state 表示当前的状态,第一个点是 start,中间多个点的状态都是 move,而最后一个点的状态是 end

event.changedTouches 是一个数组,记录多个点的信息,内容如下:

111.jpg

如果要判断方向的话,可以通过 event.state === 'start' 记录第一个点的坐标,然后通过 `event.state ===
'end'` 作为最后一个点的坐标,计算大小或者差值,从而判断方向。

三、示例

以 下面的场景作为使用方式:通过监听水平方向的手势打开或者回退页面。

因为 weex 实例变量在 rax 中并没有暴露,因此无法使用 weex.requireModule('navigator'),下面代码中,只是作为一种示例,在 weex 容器下,是会挂掉的。

更多相关的内容,可以看 weex 的文档:

代码:

import {createElement, Component} from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import GestureView from 'rax-gesture-view';
import {isWeex} from 'universal-env';
import styles from './App.css';

if (isWeex) {
  const Navigator = weex.requireModule('navigator');
}

let start = '';
let end = '';
class App extends Component {
  onHorizontalPan = (e) => {
    console.log(e.changedTouches);
    if (e.state === 'start') {
      start = e.changedTouches[0].clientX;
    }
    if (e.state === 'end') {
      end = e.changedTouches[0].clientX;
      if (end < start) {
        // 左滑 前进
        if (isWeex) {
          Navigator.push(location.href);
        } else {
          location.href = 'http://' + location.host + '?timestamp=' + Date.now();
        }
      } else {
        // 右滑
        if (isWeex) {
          Navigator.pop();
        } else {
          history.back();
        }
      }
    } 
  }
  onVerticalPan = (e) => {
    
  }
  render() {
    return (
      <GestureView style={styles.app}
        onVerticalPan={this.onVerticalPan}
        onHorizontalPan={this.onHorizontalPan}
      />
    );
  }
}

export default App;

效果:

2GIF.gif