Ionic2-Gestures tap press pan swipe等手勢事件

原文出處：http://www.360doc.com/content/17/0407/16/16002580_643656532.shtml
先上效果：

基本的手勢可以通過綁定到tap(點擊),press（按下）,pan（隨着手指移動）,swipe（隨着手指迅速移動）,rotate（旋轉）,pinch（縮放）等事件上的HTML元素來使用，這裏只演示前四個。

html

<!-
Generated template for the Gestures page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on 
lonic pages and navigation.
--> 

<!--<ion-header>
<ion-navbar>
    <ion-title>Gestures</ion-title>
</ion-navbar>
</ion-header>-->

<ion-content padding>

  <ion-card (tap)="tapEvent($evnet)">
    <!-這是通過數據綁定的方式-->
    <ion-item>點擊: {{tap}}次</ion-item>
  </ion-card>

  <ion-card (press)="pressEvent($event)">
    <!--這是通過數據綁定的方式-->
    <ion-item>按下: {{press}}次</ion-item>
  </ion-card>

   <ion-card (pan)="panEvent($event)">
      <!--這是通過數據綁定的方式-->
      <ion-item>手指滑動: {{pan}}次</ion-item>
    </ion-card>

    <ion-card (swipe)="swipeEvent($evnet)">
       <!--這是通過數據綁定的方式-->
       <ion-item>手指迅速滑動: {{swipe}}次</ion-item>
    </ion-card>
</ion-content>

ts

import ( Component } from '@angular/core';
import { NavController } from 'ionic-angular'; 

/*
Generated class for the Gestures page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on 
lonic pages and navigation.
*/

@Component({
    selector: 'page-gestures',
    templateUrl: 'gestures.html'
})
export class GesturesPage {
    public tap: number =0;
    public press: number =0; 
    public pan: number =0;
    public swipe: number = 0;

  constructor(){ } 

  /**
  *點擊事件處理
  */ 
  tapEvent(e) {
    // console.log(e);
    this.tap++;
  }

  /**
  *按下事件
  */
  pressEvent(e)
    //console.log(e);
    this.press++;
  }

  /*
  *滑動事件
  */
  panEvent(e) {
    // console.log(e);
    this.pan++;
  }

  /*
  *迅速滑動事件
  */
  swipeEvent(e) { 
    // console.log(e);
    this.swipe++; 
  }

  ionViewDidLoad(){
    console.log(Hello GesturesPage Page");
  }
}