简介

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('缩放了')
});

是不是非常的实用

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧