要解决在Angular 8中,在overflow:auto中使用HammerJs的swipeRight和swipeLeft不起作用的问题,可以尝试以下解决方法:
确保已正确安装和导入HammerJs库。在项目中的package.json文件中,确保已添加了HammerJs的依赖项,并通过import 'hammerjs';导入HammerJs库。
在包含overflow:auto的元素上添加@HostListener装饰器,并监听touchstart、touchend和touchmove事件。在事件处理程序中,获取手势事件并判断滚动方向。
import { Component, HostListener } from '@angular/core';
import * as Hammer from 'hammerjs';
@Component({
selector: 'app-root',
template: `
`,
styles: [`
.container {
overflow: auto;
}
`]
})
export class AppComponent {
@HostListener('touchstart', ['$event'])
onSwipeStart(event: TouchEvent) {
event.stopPropagation();
}
@HostListener('touchend', ['$event'])
onSwipeEnd(event: TouchEvent) {
event.stopPropagation();
}
@HostListener('touchmove', ['$event'])
onSwipeMove(event: TouchEvent) {
event.stopPropagation();
}
onSwipeLeft() {
console.log('Swipe left');
}
onSwipeRight() {
console.log('Swipe right');
}
}
在这个示例中,我们阻止了touchstart、touchend和touchmove事件的冒泡,以避免与父级容器滚动事件冲突。
如果以上解决方法仍然不起作用,可以尝试使用ng-swipe-left和ng-swipe-right指令代替swiperight和swipeleft事件。
确保已正确导入和声明ngSwipeLeft和ngSwipeRight指令。
这些解决方法应该能够解决在Angular 8中在overflow:auto中使用HammerJs的swipeRight和swipeLeft不起作用的问题。