簡介

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

是不是非常的實用

覺得效果不錯的請幫忙加個關注點個贊，經常分享前端實用開發技巧