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>
