What are MIP gestures?

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

Example

Var util = require ('til '); Var Gesture = util. Gesture; Var customEle = require ('melmelenet '). create (); Var build = function (){ Var gesture = new Gesture (this. element ); // On multiple event names can be used as parameters, separated by spaces. For example, gesture. on ('tap swip ') Gesture. on ('tap', function (event, data ){ // Original event. For example, if the tap event is triggered by touchend, the event is the touchend event object corresponding to the tap event. Console. log (event ); // Data calculated by gesture. For more information about the parameters, see the following section. Console. log (data. type); // "tap" }); };

Initialization parameters

During gesture instantiation, the second parameter can pass an object as the configuration parameter.

Example:

// By default, vertical sliding events are blocked. Var gesture = new Gesture (element ,{ PreventY: true });

Specific parameter introduction:

PreventDefault	Whether to block default events
PreventX	Whether to block the default event when sliding horizontally
PreventY	Whether to block default events during vertical sliding
StopPropagation	Whether to prevent event bubbles

Default parameters:

// If no configuration parameter is input during initialization, the following configuration will be used for initialization.                    { PreventDefault: false, StopPropagation: false, // Slide events are blocked by default. Because the browser has many default operations, slide events are blocked by default. PreventX: true, PreventY: false                    }

Introduction to gesture data objects

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	Slide angle. For example, the slide is 0 degrees.
DeltaTime	The time interval from start to end. Unit: ms
DeltaX	Horizontal axis displacement
DeltaY	Vertical axis displacement
Direction	Direction. 0: Not changed 1: Top 2: Right 3: bottom 4: Left
Distance	Moving distance
Pointers	Touch Point
TimeStamp	Event timestamp
Velocity	Speed
VelocityX	Horizontal Speed
VelocityY	Vertical Speed
X	Touch center coordinate x
Y	Touch center coordinate y
Type	Event type

Extended field:

Each gesture can extend the field to the data object. For example, the swipeDirection field in the swipe event. For details, see the description of the gesture reader.

Gesture reader

The gesture reader can receive gesture data objects and recognize specific gestures to trigger specific gesture events.

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

Currently, there are three built-in identifiers: tap, dobuletap, and swipe.

Tap

Usage:

Doubletap

Double-click: If you bind both the tap and doubletap, the tap event will be triggered Ms later to determine whether to trigger double-click.

Usage:

Gesture. on ('tap', function (event, data ){ Console. log ('click '); });

Gesture. on ('tap', function (event, data ){ Console. log ('double-click '); });

Swipe

Slide

Usage:

// Method 1: Gesture. on ('swip', function (event, data ){ Console. log (data. type); // "swipe" Console. log (data. swipeDirection); // "up" or "right" or "down" or "left" }); // Method 2: Gesture. on ('swipeup swipeid', function (event, data ){ Console. log (data. type) // "swipeup" or "swipedown" Console. log (data. swipeDirection) // "up" or "down" });