ジェスチャー
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"
});
};初期化パラメータの概要
ジェスチャー インスタンス化するとき、2 番目のパラメーターは構成としてオブジェクトを渡すことができますパラメータ
例:
// 默认阻止纵向滑动事件
var gesture = new Gesture(element, {
preventY: true
});特定のパラメータの導入:
preventDefault 是否阻止默认事件 preventX 是否阻止横向滑动时的默认事件 preventY 是否阻止纵向滑动时的默认事件 stopPropagation 是否阻止事件冒泡
デフォルトパラメータ:
// 如果初始化时不传入配置参数，会使用下面的配置进行初始化
{
preventDefault: false,
stopPropagation: false,
// 默认会阻止横滑的事件，考虑到浏览器横滑有很多默认操作，所以在这里默认阻止横滑
preventX: true,
preventY: false
}ジェスチャ データオブジェクトの導入
データオブジェクトは、イベント処理関数の 2 番目のパラメータとして渡されます。
例:
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 フィールドについては、ジェスチャ レコグナイザの概要を参照してください。ジェスチャ レコグナイザは、ジェスチャ データ オブジェクトを受信し、特定のジェスチャを認識し、特定のジェスチャ イベントをトリガーできます。
Gesture Recognizer オブジェクトは、ユーザーがイベントをバインドすると自動的に作成され、ユーザーがイベントのバインドを解除すると自動的に破棄されます。
現在 3 つの組み込み認識機能があります: タップ、ダブルタップ、スワイプ
タップ
使用法:
gesture.on('tap', function (event, data) {
console.log('单击');
});ダブルタップ
タップとダブルタップが同時にバインドされている場合、タップ イベントがトリガーされます。ダブルクリックがトリガーされるかどうかを決定するために 300 ミリ秒の遅延が発生します。
使い方:
gesture.on('tap', function (event, data) {
console.log('双击');
});スワイプ
スワイプ
使い方:
// 使用方法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"
});
