简介
@nekr/hammerjs 是一款轻量级的移动端手势识别库 Hammer.js 的 npm 包。它拥有许多常用的手势，如 tap、pan、swipe、pinch、rotate 等。我们可以使用它来实现移动端页面的手势交互效果。
安装
在命令行中输入以下命令来安装 @nekr/hammerjs：
--- ------- -------------- ------
使用
在 HTML 中引入 Hammer.js 的 CDN，或者在 JavaScript 中使用 import 引入：
------ ------ ---- -----------------
初始化
在需要使用手势识别的元素上初始化 Hammer.js：
----- -- - ------------------------------------- ----- ------ - --- -----------
监听事件
Hammer.js 使用 on() 方法来监听事件。例如，我们监听一个 tap 事件：
---------------- ------- -- - ------------------- ---
支持的手势
Hammer.js 支持的手势如下：
- tap：单击
- doubletap：双击
- press：按下
- pinch：缩放
- rotate：旋转
- swipe：滑动
- pan：平移
选项
Hammer.js 使用设定项（option）来自定义其行为。例如，我们在初始化时设置 swipe 方向：
----- ------ - --- ---------- -
------ -
---------- --------------------
-
---实例代码
接下来，我们来看一个实例。在这个实例中，我们将实现一个简单的图片查看器。用户可以用手指缩放、拖动图片。
HTML：
---- -------------------- ---- -------------------------------------------- ------
JavaScript：
------ ------ ---- -----------------
----- -- - ------------------------------------------
----- ----- - ----------------------------------
--- ----- - --
--- --------- - --
--- ---- - --
--- -------- - --
--- ---- - --
--- -------- - --
----- ------ - --- ---------- -
---------- -----
----- -----
-------------------- -----
------------------ -----
---------------- --
------ -----
------------ -------
---
------------------------- ------- ---- ---
----------------------- ---------- -------------------- ---
---------------- ------- -- -
---- - -------- - -------------
---- - -------- - -------------
-- ----- - -- -
---- - --
- ---- -- ----- - -------------- - ------------------ -
---- - -------------- - ------------------
-
-- ----- - -- -
---- - --
- ---- -- ----- - --------------- - ------------------- -
---- - --------------- - -------------------
-
--------------------- - ----------------------- ---------- -- ----------------- --------- ----
---
------------------- -- -- -
-------- - -----
-------- - -----
---
------------------ ------- -- -
----- - ----------- ------------------ - -------------- -----
--------------------- - ----------------------- ---------- -- ----------------- --------- ----
---
--------------------- -- -- -
--------- - ------
---
---------------------- -- -- -
----- - --
---- - --
---- - --
---------------------- - ---------- ---- ------
--------------------- - ----------------------- ---------- -- ----------------- --------- ----
------------- -- -
---------------------- - -------
-- -----
---总结
@nekr/hammerjs 提供了一种简单而有效的方式来实现移动端页面的手势交互效果。通过本文的教程和示例代码，读者可以快速掌握 Hammer.js 基本用法，从而实践出更棒的移动端交互体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005588981e8991b448d5cc5