解决ionic4使用手势时影响正常滑动功能

解决ionic4使用手势时影响正常滑动功能

1.添加HammerConfig

import { HammerGestureConfig } from '@angular/platform-browser';

declare var Hammer: any;

export class HammerConfig extends HammerGestureConfig {

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

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

    const mc = new Hammer(element, options);

    // keep default angular config
    mc.get('pinch').set({ enable: true });
    mc.get('rotate').set({ enable: true });

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

    return mc;
  }
}

2.在AppModule中注入

{ provide: HAMMER_GESTURE_CONFIG, useClass: HammerConfig },

3.在使用到手势的地方添加以下代码

data-mc-options='{"touchAction": "pan-y"}'

参考资料

http://hammerjs.github.io/touch-action/