原文出处: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");
}
}