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