美文网首页
解决ionic4使用手势时影响正常滑动功能

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

作者: 三心不会二意 | 来源:发表于2019-06-21 10:11 被阅读0次

    解决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/

    相关文章

      网友评论

          本文标题:解决ionic4使用手势时影响正常滑动功能

          本文链接:https://www.haomeiwen.com/subject/tlieqctx.html