title:

layout: doc

MIP封装了单击，双击，滑动等手势，可在MIP组件开发中使用。
组件中应用示例参见 mip-img.js

示例

  1. var util = require('util');
  2. var Gesture = util.Gesture;
  3. var customEle = require('customElemenet').create();
  6. var build = function () {
  7.     var gesture = new Gesture(this.element);
  9.     // on 可接受多个事件名做为参数，以空格分隔。如 gesture.on('tap swipe')
  10.     gesture.on('tap', function (event, data) {
  11.         // 原始事件。如tap事件是通过 touchend 触发，event为tap对应的touchend事件对象
  12.         console.log(event);
  13.         // gesture 计算后的数据。参数介绍见后面
  14.         console.log(data.type); // "tap"
  15.     });
  16. };

初始化参数介绍

gesture 实例化时第二个参数可以传一个object做为配置参数

示例：

  1.     // 默认阻止纵向滑动事件
  2.     var gesture = new Gesture(element, {
  3.         preventY: true
  4.     });

具体参数介绍：

  1. preventDefault         是否阻止默认事件
  2. preventX               是否阻止横向滑动时的默认事件
  3. preventY               是否阻止纵向滑动时的默认事件
  4. stopPropagation        是否阻止事件冒泡

默认参数：

  1. // 如果初始化时不传入配置参数，会使用下面的配置进行初始化
  2. {
  3.     preventDefault: false,
  4.     stopPropagation: false,
  5.     // 默认会阻止横滑的事件，考虑到浏览器横滑有很多默认操作，所以在这里默认阻止横滑
  6.     preventX: true,
  7.     preventY: false
  8. }

gesture 数据对象介绍

数据对象做为事件处理函数的第二个参数传入。

示例：

  1.     gesture.on('tap', function (event, data) {
  2.         console.log(data);
  3.     });

通用字段：

  1. angle              滑动角度，如横滑为0度
  2. deltaTime          从开始到结束的时间间隔。单位是ms
  3. deltaX             横轴位移
  4. deltaY             纵轴位移
  5. direction          方向。0: 未变动   1: 上   2:右   3: 下   4: 左
  6. distance           移动距离
  7. pointers           触摸点
  8. timeStamp          事件发生的时间戳
  9. velocity           速度
  10. velocityX          横向速度
  11. velocityY          纵向速度
  12. x                  触摸中心点坐标x
  13. y                  触摸中心点坐标y
  14. type               事件类型

扩展字段：

各手势可以向数据对象中扩展字段。如 swipe 事件中的 swipeDirection 字段，具体请看手势识别器介绍

手势识别器

手势识别器可以接收 gesture 数据对象，并识别出具体手势，触发具体的手势事件。

手势识别器对象在用户绑定事件时自动创建，在用户解绑事件时自动销毁。

目前有三种内置识别器：tap、dobuletap、swipe

tap

使用方法:

  1. gesture.on('tap', function (event, data) {
  2.     console.log('单击');
  3. });

doubletap

双击，如果同时绑定tap和doubletap，tap事件会延迟300ms触发以判断是否触发双击。

使用方法：

  1. gesture.on('tap', function (event, data) {
  2.     console.log('双击');
  3. });

swipe

滑动

使用方法：

  1. // 使用方法1：
  2. gesture.on('swipe', function (event, data) {
  3.     console.log(data.type); // "swipe"
  4.     console.log(data.swipeDirection); // "up" or "right" or "down" or "left"
  5. });
  7. // 使用方法2：
  8. gesture.on('swipeup swipedown', function (event, data) {
  9.     console.log(data.type) // "swipeup" or "swipedown"
  10.     console.log(data.swipeDirection) // "up" or "down"
  11. });