ionicでスワイプイベントを取得する


ionicのアプリでスワイプイベントを取得することになったので試してみます。

実装

home.htmlの中にdivを準備してそこにスワイプイベントをつけていきます。

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div style="height: 50%;width :50%;background-color:blue;" (swipe)="swipeEvent($event)"></div>
</ion-content>

home.tsにスワイプ時に動くメソッドを作成します。

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
  }

  swipeEvent($event) {
    console.log($event);
    if($event.direction==2) {
      alert("左へ");
    } else if($event.direction==4) {
      alert("右へ");
    }
  }
}

スワイプしたときに入ってきたイベントの「direction」に方向が入ってくるのでそれでどちらにスワイプされたのかが取得できます。

実行

ionic serveで実行してスワイプイベントが取れている確認してみます。

とくに問題なくスワイプイベントを取得できました。

  • このエントリーをはてなブックマークに追加

PAGE TOP