Question

我在我的角度应用程序中使用了Hammerjs。我在图像的轮播页面上有主页，可以左右滑动。我也有一个固定的标题，当我单击汉堡包按钮时，菜单被打开，我想从下往上滑动。因此，现在我无法在主页上从上到下滑动。在轮播作品上滑动，也在标题上滑动。我尝试在主页上评论轮播组件，并且在顶部滑动时滑动效果很好。我该如何解决？

export class HammerConfig extends HammerGestureConfig {
    public overrides: Record<string, {}> = {
        pinch: { enable: false },
        rotate: { enable: false },
        swipe: { direction: Hammer.DIRECTION_ALL },
    };
}

Answer 1

export class MyHammerConfig extends HammerGestureConfig {
  events: string[] = [];

  overrides: {[key: string]: Object} = {};

  buildHammer(element: HTMLElement): HammerInstance {
    return new Hammer(element, {
      cssProps: Hammer.defaults.cssProps,
      recognizers: [
        [Hammer.Swipe],
        [Hammer.Tap],
      ],
    });
  }
}

在MyComponent.ts

中

const hammerConfig = new HtcHammerConfig()
    const hammer = hammerConfig.buildHammer(document.documentElement)

    fromEvent(hammer, "swipe").pipe(
      takeWhile(()=>this.alive))
      .subscribe((res: any) => {

        console.log(res.deltaY<0?'to the top':'to the bottom'  )
      });

在移动设备上从上到下滑动不起作用（HAM JS）

1 个答案: