EDIT:将代码段嵌入问题中时效果很好,但在编辑时效果不佳;这让我意识到它与可滚动的基础容器有关...我在手机上对其进行了测试,并且锤子在没有overflow
属性的小区域上也能正常工作。我更新了代码段以反映这一点。
问题是:如何使其在需要垂直滚动的容器上工作?
我正在使用Angular PWA中的滑动导航进行构建。我可以在Chrome桌面上运行它,但不能在手机上运行。当我在Chrome devtools中尝试触摸模拟器时,它会根据方向/设备而发疯,几乎根本没有检测到任何东西。 panleft
和panright
的工作效果略好,但由于某种原因完全可以将锤子打碎(可能是因为我没有对它进行反跳,所以不久后它就会停止检测而没有任何错误)。
我在做什么错?
下面的代码段与Chrome devtools中的设备模拟器一起使用时的行为类似
const hammer = new Hammer(document.documentElement);
hammer.on('swipeleft swiperight', event => {
console.log(event.type);
});
body,
html {
height: 100%;
}
.content {
margin-top: 20%;
width: 100%;
height: 80%;
background: orange;
overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
Can touch this
<div class="content">Can't touch this (on mobile / emulator)</div>
实际代码
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor(
private gameService: GameService,
private routerService: RouterService
) {}
ngOnInit() {
this.gameService.gameInit();
const hammer = new Hammer(document.documentElement);
hammer.on('swipeleft swiperight', event => {
if (event.type === 'swiperight') {
this.routerService.navNext();
} else if (event.type === 'swipeleft') {
this.routerService.navPrev();
}
});
}
}
尝试此https://github.com/hammerjs/hammer.js/issues/1065#issuecomment-285855090。遇到了同样的问题,对我有帮助。