基于vue上使用hammer.js的个人使用总结

1.安装hammerjs

 

npm install --save hammerjs

2.hammerjs的基本使用

  1.在相应的vue文件里导入hammerjs

import Hammer from 'hammerjs'

  2.创建Hammer对象并绑定响应事件

var square = document.querySelector('.square');

// Create an instance of Hammer with the reference.
var hammer = new Hammer(square);

// Subscribe to a quick start event: press, tap, or doubletap.
// For a full list of quick start events, read the documentation.
hammer.on('press', function(e) {
  e.target.classList.toggle('expand');
  console.log("You're pressing me!");
  console.log(e);
});

 首先获取到支持hammerjs的手势事件的元素，创建Hammer对象，绑定相应的事件，比如press，tap，swipe等事件，这些是官   方给的基础事件。

3.manager

这里的manager我的理解是你可以自定义你事件，利用manger去管理这些事件。这里我使用官方给的示例去理解这个manager。

tap事件

    具体代码详见https://codepen.io/choskim/pen/WZggmg。

    这里主要讲讲js部分：

// Get a reference to an element
var square = document.querySelector('.square');

// Create a manager to manager the element
var manager = new Hammer.Manager(square);

// Create a recognizer
var DoubleTap = new Hammer.Tap({
  event: 'doubletap',
  taps: 2
});

// Add the recognizer to the manager
manager.add(DoubleTap);

// Subscribe to desired event
manager.on('doubletap', function(e) {
  e.target.classList.toggle('expand');
});

同样是先获取到支持手势事件的元素，然后创建Hammer的manager对象，之后继续创建tap事件对象，在这个对象里可以设置第一个参数event的事件名称，也就是绑定事件的名称，类似click等事件的名称。还有第二个参数taps，这个taps是手指点击屏幕的次数。你可以设置成2，这样的话，doubletap事件就是手指连续点击屏幕2次。同理的，你想写个threetap事件，你就可以把event设置成threetap，taps设置成3，这样就是连续点击屏幕3次的事件了！其他事件，如swipe，press差不多是这个原理，大家可以去看看git上官方的代码。网址https://github.com/hammerjs/hammer.js，在Examples里去查看他的官方示例。