angular内置手势库hammer.js


<div class="hammer" (tap)="onSwiper($event)">tap</div>

<div class="hammer" (pinch)="onSwiper($event)">pan</div>
<div class="hammer" (panstart)="onSwiper($event)">panstart</div>
<div class="hammer" (panmove)="onSwiper($event)">panmove</div>
<div class="hammer" (pancancel)="onSwiper($event)">pancancel</div>
<div class="hammer" (panend)="onSwiper($event)">panend</div>
<div class="hammer" (panleft)="onSwiper($event)">panleft</div>
<div class="hammer" (panright)="onSwiper($event)">panright</div>
<div class="hammer" (panup)="onSwiper($event)">panup</div>
<div class="hammer" (pandown)="onSwiper($event)">pandown</div>

<div class="hammer" (pinch)="onSwiper($event)">pinch</div>
<div class="hammer" (pinchstart)="onSwiper($event)">pinchstart</div>
<div class="hammer" (pinchmove)="onSwiper($event)">pinchmove</div>
<div class="hammer" (pinchend)="onSwiper($event)">pinchend</div>
<div class="hammer" (pinchcancel)="onSwiper($event)">pinchcancel</div>
<div class="hammer" (pinchin)="onSwiper($event)">pinchin</div>
<div class="hammer" (pinchout)="onSwiper($event)">pinchout</div>

<div class="hammer" (press)="onSwiper($event)">press</div>
<div class="hammer" (pressup)="onSwiper($event)">pressup</div>

<div class="hammer" (rotate)="onSwiper($event)">rotate</div>
<div class="hammer" (rotatestart)="onSwiper($event)">rotatestart</div>
<div class="hammer" (rotatemove)="onSwiper($event)">rotatemove</div>
<div class="hammer" (rotateend)="onSwiper($event)">rotateend</div>
<div class="hammer" (rotatecancel)="onSwiper($event)">rotatecancel</div>

<div class="hammer" (swipe)="onSwiper($event)">swipe</div>
<div class="hammer" (swipeleft)="onSwiper($event)">swipeleft</div>
<div class="hammer" (swiperight)="onSwiper($event)">swiperight</div>
<div class="hammer" (swipeup)="onSwiper($event)">swipeup</div>
<div class="hammer" (swiperdown)="onSwiper($event)">swiperdown</div>
复制代码

直接使用报warning!

Hammer.js is not loaded, can not bind 'tap' event.
复制代码

yarn add hammerjs @types/hammerjs
复制代码

main.ts引入

import "hammerjs";
复制代码

完美支持

查看hammerjs文档,和@types/hammerjs源码！编写config

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { InjectionToken, Optional, Inject, Provider, NgModule } from '@angular/core';

export interface HammerInstance {
  on(eventName: string, callback: Function): void;
  off(eventName: string, callback: Function): void;
}
export const HAMMER_OPTIONS = new InjectionToken<HammerOptions>('HAMMER_OPTIONS');
// 默认全开启
export class Iwe7HammerGestureConfig extends HammerGestureConfig {
  private _hammer: HammerStatic = typeof window !== 'undefined' ? (window as any).Hammer : null;
  // 原生
  events: string[] = [
    'longpress',
    'slide',
    'slidestart',
    'slideend',
    'slideright',
    'slideleft',
  ];
  constructor(
    @Optional()
    @Inject(HAMMER_OPTIONS)
    public _hammerOptions: HammerOptions
  ) {
    super();
  }
  buildHammer(element: HTMLElement): HammerInstance {
    console.log(this._hammerOptions);
    const mc = new this._hammer(element, this._hammerOptions || undefined);
    const pan = new this._hammer.Pan();
    const swipe = new this._hammer.Swipe();
    const press = new this._hammer.Press();
    const slide = this._createRecognizer(pan, { event: 'slide', threshold: 0 }, swipe);
    const longpress = this._createRecognizer(press, { event: 'longpress', time: 500 });
    pan.recognizeWith(swipe);
    // 添加 swiper press pan slide longpress
    mc.add([swipe, press, pan, slide, longpress]);
    return mc as HammerInstance;
  }

  private _createRecognizer(base: Recognizer, options: any, ...inheritances: Recognizer[]): Recognizer {
    let recognizer = new (base.constructor as RecognizerStatic)(options);
    inheritances.push(base);
    // 同时识别
    inheritances.forEach(item => recognizer.recognizeWith(item));
    return recognizer;
  }
}

const hammerOptions: HammerOptions = {
  cssProps: {
    touchCallout: 'none',
    touchSelect: 'none',
    userDrag: 'none',
    userSelect: 'none',
    tapHighlightColor: 'red',
    contentZooming: 'none'
  }
};

export const Iwe7HammerOptionsProvider: Provider = [
  {
    provide: HAMMER_OPTIONS,
    useValue: hammerOptions
  }
];

export const Iwe7HammerConfigProvider: Provider = [
  {
    provide: HAMMER_GESTURE_CONFIG,
    useClass: Iwe7HammerGestureConfig,
    deps: [HAMMER_OPTIONS]
  }
];

export const Iwe7HammerProvider: Provider = [
  Iwe7HammerOptionsProvider,
  Iwe7HammerConfigProvider
];

@NgModule({
  providers: [Iwe7HammerProvider]
})
export class Iwe7HammerModule {

}
复制代码

了解@angular/platform-bowser中的常量