Hammer Js: включить вертикальную прокрутку с горизонтальным пролистыванием - PullRequest
Новая
       34

Hammer Js: включить вертикальную прокрутку с горизонтальным пролистыванием

0 голосов
/ 14 февраля 2020

У меня есть веб-сайт angular 7, и я хочу добавить горизонтальное перелистывание к одному компоненту и вертикальное перелистывание к другому (компоненты находятся в одном модуле). Я использую молоток js для этого.

По умолчанию молоток js отключает вертикальное перелистывание, поэтому я включил перелистывание во всех направлениях с помощью приведенного ниже кода. 

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 , демонстрирующий проблему. Поставщики уровня компонента игнорируются.

1 Ответ

0 голосов
/ 18 февраля 2020

Я нашел решение там .

По сути, пользовательская конфигурация должна переопределять класс buildHammer, поэтому в зависимости от контекста могут использоваться различные параметры молотка js.

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

...