随着手机的普及以及对手机操作的多样性，现如今在开发移动端前端项目的过程中，手势交互已经成为了不可或缺的一部分。nb-mobile-gesture是一款基于Hammer.js封装的手势库，使用简单明了且支持多种手势，能够帮助我们轻松地实现移动端的手势交互效果。
安装
使用npm安装nb-mobile-gesture
$ npm install nb-mobile-gesture --save
使用方法
引入库文件
在你的项目中引入nb-mobile-gesture库文件
import nbGesture from 'nb-mobile-gesture'
初始化
通过调用create方法可以在页面上创建一个手势对象，该方法接受两个参数，一个是需要绑定手势事件的DOM元素，另一个是配置项。
const elem = document.getElementById('gesture-box') const gesture = nbGesture.create(elem, { // 手势事件回调函数 onPan: function(e) { console.log(e.angle) }, // ...其他配置项 })
支持的手势事件
pan: 拖动pinch: 缩放rotate: 旋转press: 长按swipe: 滑动tap: 轻敲
示例代码
下面是一个简单的示例，展示了如何使用nb-mobile-gesture实现一个图片的拖动和缩放功能：
-- -------------------- ---- ------- ---- --------------- ---- --------------------- ------ -------- ----- ---- - ------------------------------------ ----- ------- - ---------------------- - ------ ----------- - ----- ---- - ------------ ----- ---- - ------------ -------------------- - ----------------------- ---------- --- -- ------------ ----------- - ----- ----- - ------- -------------------- - ----------------- - -- ---------展开代码
总结
nb-mobile-gesture是一款使用方便且功能丰富的手势库，该库支持多种手势事件，并且可以通过配置项定制化实现各种手势效果。使用nb-mobile-gesture，可以帮助我们轻松地实现移动端的手势交互效果，提升项目的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a3681e8991b448d7d91
