HammerJs：启用水平滑动实现垂直滚动

Question

我有一个Angular 7网站，想要在一个组件中添加水平滑动功能，在另一个组件中添加垂直滑动功能（这两个组件在同一个模块中）。 我正在使用hammerjs实现这个功能。

默认情况下，hammerjs禁用了垂直滑动，因此我使用以下代码启用了所有方向的滑动功能。

export class MyHammerConfig extends HammerGestureConfig
{
  overrides = <any>{
    swipe: {direction: Hammer.DIRECTION_ALL},
  };
}

//declare provider in AppModule
providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig
    }
]

问题是具有水平滑动功能的组件无法垂直滚动。根据我所读的，解决方案是在具有水平滑动功能的组件中添加“touch-action: pan-y”。

然而，这在chrome上有效，但safari无法识别'touch-action'属性。

我的想法是在组件级别声明多个HAMMER_GESTURE_CONFIG提供程序：

- 在具有水平滑动的组件上，使用仅允许水平滑动的提供程序 - 在其他组件上，仅启用垂直滑动

但是，组件级提供程序似乎不考虑我的提供程序。

以下是我尝试仅启用水平滑动的一些代码：

export class HorizontalHammerConfig extends HammerGestureConfig
{
  overrides = <any>{
    swipe: {Hammer.DIRECTION_HORIZONTAL},
    pinch: {enable: false},
    rotate: {enable: false}
  };
}

//Component declaration
@Component({
  ...

  providers:[
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HorizontalHammerConfig
    }],

有什么想法吗？

编辑: 这是一个stackblitz示例，展示了问题。组件级别的提供者被忽略了。

- David

---

两个组件在不同的模块中？但是它听起来很奇怪，滑动不起作用。您是否仅检查了一个（swipe）=“swipe（$event）”，并在函数中区分向下滑动或向左滑动？ - Eliseo

Answer 1

我在这里找到了解决方案。

基本上，自定义配置必须覆盖 buildHammer 类，以便根据上下文使用不同的 hammerjs 选项。 app.module.ts

export class MyHammerConfig extends HammerGestureConfig
{
  overrides = <any>{
    swipe: {direction: Hammer.DIRECTION_ALL},
  };

  buildHammer(element: HTMLElement)
  {
    let options = {};

    if (element.attributes['data-mc-options'])
    {
      try
      {
        options = JSON.parse(element.attributes['data-mc-options'].nodeValue);
      }
      catch (err)
      {
        console.error('An error occurred when attempting to parse Hammer.js options: ', err);
      }
    }

    const mc = new Hammer(element, options);


    // retain support for angular overrides object
    for (const eventName of Object.keys(this.overrides))
    {
      mc.get(eventName).set(this.overrides[eventName]);
    }

    return mc;
  }
}

在组件模板中，将额外选项作为JSON字符串传递。

component.html

<div (swipeleft)="onSwipeLeft()" data-mc-options='{ "touchAction": "pan-y" }'">
</div>

这适用于Safari/iOS。

- David