npm包hammerjs使用教程

简介

Hammer.js是一个支持多点触摸的JavaScript库，可以轻松实现触控手势操作。通过使用Hammer.js可不需要额外的JS代码就可以支持tap，swipe，pinch等常见的手势。

安装

通过npm安装 hammerjs:

npm install hammerjs --save

引入Hammer.js到你的项目中

var Hammer = require('hammerjs');

常见手势

tap

最简单的手势，单击一个元素两次或按下某个键来触发。例如:

var tapElement = document.getElementById('tapElement');
var tap = new Hammer(tapElement);
tap.on('tap', function () {
    alert('tap');
});

或者你可以在选项中传递指定的次数来自定义单击次数：

var singleTap = new Hammer(document.getElementById('singleTap'), {
  taps: 1
});

var doubleTap = new Hammer(document.getElementById('doubleTap'), {
  taps: 2
});

swipe

轻打并滑动一个元素来触发。例如:

var swipeElement = document.getElementById('swipeElement');
var swipe = new Hammer(swipeElement);
swipe.on('swipe', function() {
    alert('swipe');
});

你可以在选项中传递偏移量来定义最短滑动距离和方向：

var swipe = new Hammer(document.getElementById('swipe'), {
  direction: Hammer.DIRECTION_RIGHT,
  velocity: 0.2
});

swipe.on('swipe', function() {
  console.log('swiped right');
});

pinch

对于如缩小和放大等手势相对于触控屏幕上的屏幕大小的元素尺寸进行改变。例如:

var pinchElement = document.getElementById('pinchElement');
var pinch = new Hammer(pinchElement);
var scale = 1;
pinch.get('pinch').set({ enable: true });

pinch.on('pinch', function(e) {
    pinchElement.style.transform = 'scale(' + (scale * e.scale) + ')';
});

rotate

指针绕视图的中心以一个特定的角度旋转元素。例如：

-- -------------------- ---- -------
--- ------------- - -----------------------------------------
--- ------ - --- ----------------------

-------------------------- ------- ---- ---
--- ----- - --

------------------- ----------- -
    ----------------------------- - --------- - ------ - ----------- - -------
---

讨论

通过学习Hammer.js你可以快速实现一些手势的交互，同时也可以通过对样例的了解来深入理解什么是多点触控以及怎样实现基于多点触控的事件和交互。多练几个示例，你将能够创建精美的UI，并实现无缝的用户体验。

结论

Hammer.js是支持触控手势的轻量级Library，它提供了一个易用的API，使你可以轻松地为你的网站或Web应用程序添加手势交互。同时，由于它的灵活性和可定制性，你可以通过简单的API自定义更多样式的交互体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57729