要解决在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
不起作用的问题。