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

基本的手势可以通过绑定到tap(点击),press（按下）,pan（随着手指移动）,swipe（随着手指迅速移动）,rotate（旋转）,pinch（缩放）等事件上的HTML元素来使用，这里只演示前四个。

html

<!--
  Generated template for the Gestures page.
 
  See http:///docs/v2/components/#navigation for more info on
  Ionic 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:///docs/v2/components/#navigation for more info on
  Ionic 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');
  }
 
}
 

---

顺子技术栈 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明Ionic2-Gestures针对手指触摸屏幕处理！