时间戳

首页 > 解决方案 > HammerJs：通过水平滑动启用垂直滚动

angular - HammerJs：通过水平滑动启用垂直滚动

问题描述

我有一个 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 示例。组件级提供程序被忽略。

标签： angularsafarimobile-safarihammer.js

解决方案

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

基本上，自定义配置必须覆盖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 字符串传递。

组件.html

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

这适用于野生动物园/iOS

推荐阅读