我正在尝试在应用程序的整个屏幕上捕获滑动手势。这个想法是让其他服务可以监听这些调度动作,在这种情况下,是一个用于导航的路由器。
因为我只希望将这些听众放在一个地方,所以我尝试将它们连接到主体或覆盖应用程序屏幕的div。这两种方法都不如我所愿。
<div (swipeleft)="swipeLeft()" (swiperight)="swipeRight()" class="touch"></div>
swipeLeft() {
this.store.dispatch(UserActions.swipeLeft());
}
回想起来,触摸层的问题应该很明显:它覆盖了屏幕,因此覆盖了应用程序的其余部分。将pointer-events: none;
设置为到达应用程序的其余部分将中断滑动检测。
const mc = new Hammer(document.querySelector('body'));
mc.on('swipeleft swiperight', (ev) => {
console.log(ev.type);
// this.store.dispatch(UserActions.swipeLeft());
});
在此处附加问题的地方是,它似乎只在某些元素上记录滑动,例如app-root
和我拥有的状态栏,但不在我的路由器插座上,或者在底部的工具栏上有一些按钮。] >
所以,如何捕获整个应用程序上的滑动?
我已经尝试创建一个代码段来重现该问题,但是如果没有Angular组件,它的行为几乎就像我希望我的应用程序那样。尝试从摘要中的按钮边缘滑动时,可以观察到与我的问题类似的行为。
const touchLayer = document.getElementById('touch'); const body = document.querySelector('body'); const mc = new Hammer(body); mc.on("swipeleft swiperight", function(ev) { touchLayer.textContent = ev.type + " gesture detected."; });
#touch, #myApp { position: fixed; height: 300px; width: 100%; } #myApp { background: repeating-linear-gradient(-55deg, #666, #666 10px, #333 10px, #333 20px); opacity: .5; } #touch { background: cyan; text-align: center; font: 30px/300px Helvetica, Arial, sans-serif; opacity: .5; } .card { width: 200px; height: 100px; background: red; position: relative; margin: 1em; } button { margin: 2em; right: 0; bottom: 0; position: absolute; }
<script src="https://hammerjs.github.io/dist/hammer.js"></script> <!-- Tried putting this on top, blocking the screen --> <div id="touch"></div> <div id="myApp"> <div class="card"> <button onclick="alert('test')">Button!</button> </div> <div class="card"> <button onclick="alert('test')">Button!</button> </div> </div>
我正在尝试在应用程序的整个屏幕上捕获滑动手势。想法是让其他服务可以侦听这些调度动作,在这种情况下,是出于导航目的的路由器。...
[当您要将Hammer添加到Angular 8应用程序时,需要作为提供程序HAMMER_GESTURE_CONFIG并使用HammerGestureConfig类