MIP.util.Gesture

Gesture 是 MIP 封装的手势库,目前包含了对单击、双击、滑动等事件的处理。

  • 用法:

    1. let Gesture = MIP.util.Gesture
    2. let gesture = new Gesture(element, opt)
  • 参数:

类型 参数名 是否必选 描述
Object element 需要绑定手势操作的元素
Object opt 配置参数

配置参数具体介绍如下

  • preventDefault: 是否阻止默认事件,默认值为false
  • preventX: 是否阻止横向滑动时的默认事件,默认值为true
  • preventY: 是否阻止纵向滑动时的默认事件,默认值为false
  • stopPropagation: 是否阻止事件冒泡,默认值为false

方法

on

  • 描述:

    利用手势识别器,给手势事件添加对应的手势事件处理函数

  • 参数:

类型 参数名 是否必选 描述
string type 手势事件类型
Function fn 手势事件处理函数

目前内置的手势事件类型 type 有:

  • tap: 单击
  • doubletap: 双击
  • swipe: 滑动
  • swipeleft: 向左滑
  • swiperight: 向右滑
  • swipeup: 向上滑
  • swipedown: 向下滑

    手势事件处理函数 fn 的参数如下:

类型 参数名 是否必选 描述
Object event 描述手势事件的对象,原生Event对象的接口实现
Object data 滑动手势的数据对象

滑动手势的数据对象的通用字段如下:

  • angle: 滑动角度,如横滑为0度
  • deltaTime: 从开始到结束的时间间隔。单位是ms
  • deltaX: 横轴位移
  • deltaY: 纵轴位移
  • direction: 方向。0: 未变动 1: 上 2:右 3: 下 4: 左
  • distance: 移动距离
  • pointers: 触摸点
  • timeStamp: 事件发生的时间戳
  • velocity: 速度
  • velocityX: 横向速度
  • velocityY: 纵向速度
  • x: 触摸中心点坐标x
  • y: 触摸中心点坐标y
  • type: 手势事件类型,内置类型见上文

    特别地,当 type 为 swipe 时,数据对象会增加一个额外的 swipeDirection 字段,它表示滑动的方向,其值可以是 up、 down、 left、 right

  • 返回值:

    {Object} 返回当前 Gesture 实例

  • 用法:

    1. // 绑定 tap
    2. gesture.on('tap', function (event, data) {
    3. console.log('单击')
    4. })
    5. // 绑定向上滑或向下滑
    6. gesture.on('swipeup swipedown', function (event, data) {
    7. console.log(data.type) // 'swipeup' or 'swipedown'
    8. console.log(data.swipeDirection) // 'up' or 'down'
    9. })

off

  • 描述:

    清除手势事件对应的处理函数,由于 MIP.util.Gesture 继承自 MIP.util.EventEmitter,并且没有重写 off 方法,所以详细用法见EventEmitter

cleanup

  • 描述:

    清除所有的手势事件

  • 参数:

  • 返回值:

    undefined

  • 用法:

    1. gesture.cleanup()