简介
@egjs/hammerjs 是一个基于 Hammer.js 前端手势库的封装，旨在为前端开发者提供更为简洁、高效的手势操作解决方案。通过使用 @egjs/hammerjs，开发者可以快速轻松地在项目中引用 Hammer.js 并进行手势事件的监听与处理。
安装
@egjs/hammerjs 可以通过 npm 进行安装，执行以下指令即可：
npm install @egjs/hammerjs
使用
1. 导入
在需要使用 @egjs/hammerjs 的文件中，通过 import 语句引入该库：
import * as Hammer from "@egjs/hammerjs";
2. 初始化
在引入 @egjs/hammerjs 后，需要通过 Hammer 的构造函数进行实例化，才能开始监听和处理手势事件。实例化时传入的第一个参数为需要监听的 DOM 元素：
const hammer = new Hammer(element);
其中，element 可以是一个 DOM 元素，也可以是一个选择器字符串。
3. 监听事件
监听手势事件的方法名称与 Hammer.js 官方提供的相同，具体事件名称可前往 Hammer.js 官方网站查看。下面是一个例子：
hammer.on("swipeleft", event => {
console.log("Left swipe detected!");
});4. 销毁
在不需要再使用 Hammer 实例时，应当调用其 destroy() 方法进行销毁：
hammer.destroy();
示例
下面给出一个实际应用场景的示例代码。假设有一个列表，用户需要通过上下滑动列表以实现滚动。为更好地用户体验，我们希望在用户快速滑动时使列表加速度变大进行滚动，而当用户缓慢滑动时，则以较小速度滚动。我们可以使用 @egjs/hammerjs 来监听用户上下滑动事件，根据滑动速度的快慢增加或减缓列表的滚动速度。
-- -------------------- ---- -------
---- ----------
----
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- -------
-----
-------- -------------------- ---- -------
------ - -- ------ ---- -----------------
----- ------- - --------------------------------
----- ------ - --- ----------------
--- ------------- - --
----------------------- ---------- ------------------------- ---
-------------------- ----- -- -
----- ----- - -------------------------
----- ---- - -----------------
--- ----- - --------------- - --
-- ------ - ---- -
----- - --- - ---------------- - ---- - ---
-
----- -- -----
----- --------- - ------------- - ------
----------------- - ----------
-- ---------- - - -- --------- - --------------------- -
-------
-
-----------------------
---
------------------- ----- -- -
------------- - ------------------
---该示例会在用户拖动列表时监听 panmove 事件，根据用户滑动的速度调整列表的滚动速度，并在 panend 事件触发时保存当前滚动距离。在实际应用中，可以根据此原理进行更为复杂的手势操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac70b5cbfe1ea0610a26