資訊專欄INFORMATION COLUMN
摘要：一個(gè)移動(dòng)端的手勢庫。的過程最簡單的使用一個(gè)手勢的定義綁定事件調(diào)用初始化在中可以看到下面一段代碼用于定義一個(gè)手勢操作的元素定義配置參數(shù)定義如果為默認(rèn)默認(rèn)同步注冊了同理同步注冊也可以外部采用注冊同步綁定事件中的實(shí)際上為調(diào)用中的
hammerjs ———— 一個(gè)移動(dòng)端的手勢庫。
New Hammer 的過程最簡單的使用一個(gè)手勢的demo
// 定義 Manager
var hammertime = new Hammer(element, {});
// 綁定事件
hammertime.on("pan", function(e) {
TODO Logic...
})
調(diào)用 Hammer function 初始化
在hammer.js中可以看到下面一段代碼用于定義一個(gè)Manager(element, options)
element: 手勢操作的元素
options: 定義配置參數(shù)
function Hammer(element, options) {
options = options || {};
// 定義recongnizers, 如果 options.recongnizers 為 undefined, 默認(rèn) "Hammer.defaults.preset"
options.recognizers = ifUndefined(options.recognizers, Hammer.defaults.preset);
return new Manager(element, options);
}
默認(rèn) recongnizers, TapRecognizer 同步注冊了 TapRecognizer, 同理 PinchRecognizer 同步注冊 RotateRecognizer (也可以外部采用 recognizer.recognizeWith() 注冊同步Recognizer.)
preset: [
// RecognizerClass, options, [recognizeWith, ...], [requireFailure, ...]
[RotateRecognizer, {enable: false}],
[PinchRecognizer, {enable: false}, ["rotate"]],
[SwipeRecognizer, {direction: DIRECTION_HORIZONTAL}],
[PanRecognizer, {direction: DIRECTION_HORIZONTAL}, ["swipe"]],
[TapRecognizer],
[TapRecognizer, {event: "doubletap", taps: 2}, ["tap"]],
[PressRecognizer]
],
綁定事件handler (hammertime.on)
demo中的 hammertime.on("pan", function(e) { }) 實(shí)際上為調(diào)用 manager.js 中的 on function
on: function(events, handler) {
if (events === undefined) {
return;
}
if (handler === undefined) {
return;
}
var handlers = this.handlers; // bind handlers to Manager.handler
each(splitStr(events), function(event) {
handlers[event] = handlers[event] || [];
handlers[event].push(handler);
});
return this; // this = Manager
},
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105131.html
摘要：是一個(gè)為應(yīng)用添加觸摸手勢的非常受歡迎的庫文中將看到結(jié)合一起使用是多么的簡單原文示例是針對版本經(jīng)過測試在目前最新的版本中此教程依然適用文章將以來統(tǒng)一代稱版本名詞滑動(dòng)和類似但滑動(dòng)更快速無粘滯左滑右滑上滑下滑頭像輪播簡介我們將構(gòu)建一個(gè)頭像輪播可以 HammerJS 是一個(gè)為 web 應(yīng)用添加觸摸手勢的非常受歡迎的庫,文中,將看到 Angular 結(jié)合 HammerJS 一起使用是多么的簡單 ...
摘要：目前作為騰訊手機(jī)手勢解決方案，在各大項(xiàng)目中都發(fā)揮著作用。因此也入選了騰訊平臺的精品組件除了國內(nèi)外的項(xiàng)目團(tuán)隊(duì)都在使用，國內(nèi)外的各大網(wǎng)站也進(jìn)行了轉(zhuǎn)載報(bào)道，作為超級小的手勢庫，騰訊的項(xiàng)目為什么不選擇而選擇下面從各個(gè)角度架構(gòu)原理上進(jìn)行一下分析。 目前AlloyFinger作為騰訊手機(jī)QQ web手勢解決方案，在各大項(xiàng)目中都發(fā)揮著作用。感興趣的同學(xué)可以去Github看看： https://git...
摘要：兼容性如何支持以及的設(shè)備的瀏覽器便可運(yùn)行不一一列舉一共不到行為什么體積這么小騰訊手內(nèi)大量的都會去不斷地從各個(gè)維度進(jìn)行性能優(yōu)化。騰訊內(nèi)部有哪些項(xiàng)目在用目前主要是興趣部落群等業(yè)務(wù)在用，剛剛開源出來，只要有裁剪圖片的地方都會用到。 傳送門 Github地址：https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop 在線De...
閱讀 2997·2021-11-25 09:43
閱讀 3641·2021-08-31 09:41
閱讀 1256·2019-08-30 15:56
閱讀 2147·2019-08-30 15:55
閱讀 3007·2019-08-30 13:48
閱讀 2824·2019-08-29 15:15
閱讀 995·2019-08-29 15:14
閱讀 2665·2019-08-28 18:26
