在IONIC+Angular中使用hammer.js

聽說angular2 對于hammerjs支持很好...

1. 在package.json 加入

  "hammer-timejs": "^1.1.0",
  "hammer-touchemulator": "0.0.2",
  "hammerjs": "^2.0.8"

2. 在devDependencies中加入

 "@types/hammerjs": "^2.0.34"

3.在app.module.ts中加入

 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 export class MyHammerConfig extends HammerGestureConfig  {
    overrides = <any>{
       // override hammerjs default configuration
       'pan': {threshold: 5},
       'swipe': {
          velocity: 0.4,
          threshold: 20,
          direction: 31 
       },
      'press':{}
   }
 }

4.在app.module.ts的@NgModule的providers中加入

  { 
     provide: HAMMER_GESTURE_CONFIG, 
     useClass: MyHammerConfig 
  }

5.在DOM 元素上使用標簽

  <ion-item  (press)="pressIt()"></ion-item>
  在對應的Component中加入pressIt這個方法即可;

備注:我的項目是參考 https://github.com/ionic-team/ionic-conference-app

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容