hammerjs 使用方法

import Hammer from 'hammerjs';

<script>
  // 我这里是多个元素所以有N个ID
  const myId = document.querySelector('#myApp' + i);
  const hammer = new Hammer(myId);

  // 创建单双击应用
  const hammer_double = new Hammer.Manager(myId);

  // 添加规则
  hammer_double.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
  hammer_double.add(new Hammer.Tap({ event: 'singletap' }));

  hammer_double.get('doubletap').recognizeWith('singletap');
  hammer_double.get('singletap').requireFailure('doubletap');

  // 单双击事件
  hammer_double
    .on('singletap', function (e) {
      if (player[i].getStatus() == 'playing') {
        player[i].pause();

        setIsplayIcon(true);
      } else {
        player[i].play();

        setIsplayIcon(false);
      }

      clearTimeout(timeoutId);
      setIsShow(true); // 展现应用模板
      props.handleTouth(true, false);
    })
    .on('doubletap', function (e) {
      heartFill(e, i);
    });

  // 滑动事件
  // hammer默认禁止了上下滑动事件：需要以下设置
   hammer.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
  hammer.on('swipeleft swiperight swipeup swipedown', function (e) {
   console.log('swipe', e.type);
  });

  // 拖动事件
  // pan默认禁止了上下滑动事件：需要以下设置
  hammer.get('pan').set({ direction: Hammer.DIRECTION_VERTICAL });
  hammer.on('panup', function (e) {
    setProgressType(2);
    clearTimeout(timer);
  });

  // 双指事件
  // pinch默认是不可用的，因为它们可能会导致元素被卡住，需要一下设置
  hammer.get('pinch').set({ enable: true });
  hammer.on('pinch', function (e) {
    setIsShow(false);
    props.handleTouth(false, false);
  });
</script>