手势

MIP封装了单击,双击,滑动等手势,可在组件中使用

示例

var util = require('util');
var Gesture = util.Gesture;
var customEle = require('customElemenet').create();


var build = function () {
    var gesture = new Gesture(this.element);

    // on 可接受多个事件名做为参数,以空格分隔。如 gesture.on('tap swipe')
    gesture.on('tap', function (event, data) {
        // 原始事件。如tap事件是通过 touchend 触发,event为tap对应的touchend事件对象
        console.log(event);
        // gesture 计算后的数据。参数介绍见后面
        console.log(data.type); // "tap"
    });
};

初始化参数介绍

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

示例:

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

具体参数介绍:

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

默认参数:

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

gesture 数据对象介绍

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

示例:

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

通用字段:

angle              滑动角度,如横滑为0度
deltaTime          从开始到结束的时间间隔。单位是msdeltaX             横轴位移
deltaY             纵轴位移
direction          方向。0: 未变动   1: 上   2:右   3: 下   4: 左
distance           移动距离
pointers           触摸点
timeStamp&