몸짓
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 인스턴스화할 때 두 번째 매개변수는 개체를 구성으로 전달할 수 있습니다. 매개변수
예:
// 默认阻止纵向滑动事件
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 事件发生的时间戳 velocity 速度 velocityX 横向速度 velocityY 纵向速度 x 触摸中心点坐标x y 触摸中心点坐标ytype 事件类型
확장 필드:
각 동작은 필드를 데이터 개체로 확장할 수 있습니다. 예를 들어 스와이프 이벤트의 swipeDirection 필드에 대한 자세한 내용은 제스처 인식기 소개를 참조하세요. 제스처 인식기는 제스처 데이터 개체를 수신하고, 특정 제스처를 인식하고, 특정 제스처 이벤트를 트리거할 수 있습니다.
제스처 인식기 개체는 사용자가 이벤트를 바인딩하면 자동으로 생성되고 사용자가 이벤트 바인딩을 해제하면 자동으로 삭제됩니다.
현재 세 가지 내장 인식기가 있습니다: tap, dobuletap, swipe
tap
사용법:
gesture.on('tap', function (event, data) {
console.log('单击');
});doubletap
두 번 클릭이 동시에 바인딩되면 탭 이벤트가 트리거됩니다. 더블 클릭이 트리거되는지 여부를 결정하기 위해 300ms의 지연이 발생합니다.
사용 방법:
gesture.on('tap', function (event, data) {
console.log('双击');
});swipe
Swipe
사용 방법:
// 使用方法1：
gesture.on('swipe', function (event, data) {
console.log(data.type); // "swipe"
console.log(data.swipeDirection); // "up" or "right" or "down" or "left"
});
// 使用方法2：
gesture.on('swipeup swipedown', function (event, data) {
console.log(data.type) // "swipeup" or "swipedown"
console.log(data.swipeDirection) // "up" or "down"
});
