MIP文件手冊
/ 手勢
手勢
MIP封裝了單擊,雙擊,滑動等手勢,可在組件中使用
示例
var util = require('util'); var Gesture = util.Gesture; var customEle = require('customElemenet').create(); var build = function () { var gesture = new Gesture(this.element); // on 可接受多個事件名做為參數(shù),以空格分隔。如 gesture.on('tap swipe') gesture.on('tap', function (event, data) { // 原始事件。如tap事件是通過 touchend 觸發(fā),event為tap對應的touchend事件對象 console.log(event); // gesture 計算后的數(shù)據(jù)。參數(shù)介紹見后面 console.log(data.type); // "tap" }); };
初始化參數(shù)介紹
gesture 實例化時第二個參數(shù)可以傳一個object做為配置參數(shù)
示例:
// 默認阻止縱向滑動事件 var gesture = new Gesture(element, { preventY: true });
具體參數(shù)介紹:
preventDefault 是否阻止默認事件 preventX 是否阻止橫向滑動時的默認事件 preventY 是否阻止縱向滑動時的默認事件 stopPropagation 是否阻止事件冒泡
默認參數(shù):
// 如果初始化時不傳入配置參數(shù),會使用下面的配置進行初始化 { preventDefault: false, stopPropagation: false, // 默認會阻止橫滑的事件,考慮到瀏覽器橫滑有很多默認操作,所以在這里默認阻止橫滑 preventX: true, preventY: false }
gesture 數(shù)據(jù)對象介紹
數(shù)據(jù)對象做為事件處理函數(shù)的第二個參數(shù)傳入。
示例:
gesture.on('tap', function (event, data) { console.log(data); });
通用字段:
angle 滑動角度,如橫滑為0度 deltaTime 從開始到結(jié)束的時間間隔。單位是msdeltaX 橫軸位移 deltaY 縱軸位移 direction 方向。0: 未變動 1: 上 2:右 3: 下 4: 左 distance 移動距離 pointers 觸摸點 timeStamp 事件發(fā)生的時間戳 velocity 速度 velocityX 橫向速度 velocityY 縱向速度 x 觸摸中心點坐標x y 觸摸中心點坐標ytype 事件類型
擴展字段:
各手勢可以向數(shù)據(jù)對象中擴展字段。如 swipe 事件中的 swipeDirection 字段,具體請看手勢識別器介紹
手勢識別器
手勢識別器可以接收 gesture 數(shù)據(jù)對象,并識別出具體手勢,觸發(fā)具體的手勢事件。
手勢識別器對象在用戶綁定事件時自動創(chuàng)建,在用戶解綁事件時自動銷毀。
目前有三種內(nèi)置識別器:tap、dobuletap、swipe
tap
使用方法:
gesture.on('tap', function (event, data) { console.log('單擊'); });
doubletap
雙擊,如果同時綁定tap和doubletap,tap事件會延遲300ms觸發(fā)以判斷是否觸發(fā)雙擊。
使用方法:
gesture.on('tap', function (event, data) { console.log('雙擊'); });
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" });