简介Hammer 是一个精简且功能强大的手势库 ， 它不但支持移动端的手势 ， 对于PC端的鼠标操作也能实别
目前github的star量22.8K
官网地址：http://hammerjs.github.io/github地址:https://github.com/hammerjs/hammer.js
安装npm i hammerjs -S
使用教程// 引入手势库import Hammer from 'hammerjs'// 新建一个手势实例// myElement是要监听手势的dom元素const hammer = new Hammer(myElement);hammer.on("panleft", function(ev) {console.log('左滑了')});hammer.on("panright", function(ev) {console.log('右滑了')});hammer.on("tap", function(ev) {console.log('单点击了')});hammer.on("doubletap", function(ev) {console.log('双点击了')});hammer.on("press", function(ev) {console.log('长时间按压了')});
为了性能 ， Hammer默认只开启了上面的这些手势
如果要开启上滑、下滑、多手指的旋转、缩放需要单独设置开启
// 各个方向的滑动手势都开启hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });// 开启缩放手势实别hammer.get('pinch').set({ enable: true });// 开启旋转手势实别hammer.get('rotate').set({ enable: true });hammer.on("panup", function(ev) {console.log('上滑了')});hammer.on("pandown", function(ev) {console.log('下滑了')});hammer.on("rotate", function(ev) {console.log('旋转了')});hammer.on("pinch", function(ev) {console.log('缩放了')});
是不是非常的实用
觉得效果不错的请帮忙加个关注点个赞 ， 经常分享前端实用开发技巧
【功能强大的手势库-Hammer.JS】
推荐阅读
- 紫芽红茶功效,紫娟茶红茶的功效与作用
- QingLong - 强大的定时任务管理面板
- 值得收藏！9款小众但功能强大的智能神器
- 本田|偶尔去钓场垂钓，不求排量，只求通过性强的摩托车，求推荐
- 动物|“猪坚强”标本预计5月12日展出：汶川大地震后被埋废墟下36天后获救
- 吃什么补脑 四款药膳可强身健体养心健脑
- 治疗强迫症最好的药物有哪些
- 大学|中国这所985大学地理位置偏僻，学科实力强劲，毕业不愁找工作
- 神经系统的功能
- 甲状腺亢奋