gesture

MIP encapsulates click, double-click, slide and other gestures, which can be used in components

Example

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"
    });
};

Introduction to initialization parameters

gesture when instantiated The second parameter can pass an object as the configuration parameter

Example:

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

Specific parameter introduction:

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

Default parameter:

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

gesture data Object introduction

The data object is passed in as the second parameter of the event processing function.

Example:

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

Common fields:

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

Extended fields:

Each gesture can extend fields to the data object. Such as the swipeDirection field in the swipe event. For details, please see the introduction of gesture recognizer

gesture recognizer

The gesture recognizer can receive gesture data objects, recognize specific gestures, and trigger specific gesture events. .

The gesture recognizer object is automatically created when the user binds the event and is automatically destroyed when the user unbinds the event.

Currently there are three built-in recognizers: tap, dobuletap, swipe

tap

Usage:

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

doubletap

Double-click, If tap and doubletap are bound at the same time, the tap event will be triggered with a delay of 300ms to determine whether a double-click is triggered.

How to use:

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

swipe

Swipe