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

最新推荐文章于 2021-11-02 15:41:53 发布

转载最新推荐文章于 2021-11-02 15:41:53 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.360doc.com/content/17/0407/16/16002580_643656532.shtml

实用同时被 3 个专栏收录

738 篇文章

订阅专栏

205 篇文章

订阅专栏

Ionic3

175 篇文章

订阅专栏

本文介绍如何在Ionic框架中使用手势识别功能，包括点击、按下、滑动和迅速滑动等基本手势，通过HTML元素绑定事件实现交互。示例代码展示了如何在页面中设置手势事件处理器。

原文出处：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>

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");
  }
}