HammerJs:通过水平滑动启用垂直滚动 [英] HammerJs: enable vertical scroll with horizontal swipe

问题描述

我有一个angular 7网站，我想向一个组件添加水平滑动，向另一个组件添加垂直滑动(这些组件在同一模块中).我正在为此使用Hammerjs.

I've got an angular 7 website, and I want to add horizontal swipe to one component, and vertical swipe to another (the components are in the same module). I'm using hammerjs for that.

默认情况下，hammerjs禁用垂直滑动，因此我使用以下代码启用了全方位滑动.

By default, hammerjs disables vertical swipe, so I enabled swipping in all directions with the code below.

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.

The problem is vertical scrolling does not work on the component with the horizontal swipe. From what I've read, the solution is to add touch-action: pan-y in the component with the horizontal swipe.

但是，这在chrome上有效，但safari无法识别touch-action属性.

However, this works on chrome but safari does not recognise the touch-action property.

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

My idea was to declare multiple providers for HAMMER_GESTURE_CONFIG, at the component level:

• 在水平滑动组件上，使用仅允许水平滑动的提供程序
• 另一方面，仅启用垂直滑动

但是，组件级提供程序似乎并未考虑我的提供程序.

However, component-level providers do not seem to take my providers into account.

这是我尝试用于仅启用水平滑动的一些代码

Here is some code I tried to use to only enable horizontal swipe

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示例使问题更加严重.组件级提供程序将被忽略.

Edit: Here is a stackblitz example demostrating the issue. The component level providers are ignored.

推荐答案

我找到了解决方案基本上，自定义配置必须覆盖buildHammer类，因此可以根据上下文使用不同的Hammerjs选项.

Basically, the custom configuration has to override the buildHammer class, so different hammerjs options can be used depending on the context.

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;
  }
}

然后，在组件模板中，将extra选项作为json字符串传递.

And then, in the component template, pass the extra option as a json string.

component.html

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

此功能适用于safari/iOS

This works with safari/iOS

这篇关于HammerJs:通过水平滑动启用垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！