バージョン: v8

ジェスチャー

概要

Ionic ジェスチャーは、開発者がプラットフォームに依存しない方法で、アプリケーションのカスタムジェスチャーとインタラクションを構築できるようにするユーティリティです。開発者は、ReactやAngularのような特定のフレームワークを使用する必要はなく、Ionicアプリを構築する必要すらありません！開発者がIonic Frameworkのv5.0以降にアクセスできる限り、すべてのIonicアニメーションにアクセスできます。

複雑なジェスチャーを構築するには時間がかかる場合があります。カスタムジェスチャーを提供する他のライブラリは、多くの場合、過度に重く、マウスまたはタッチイベントをキャプチャして伝播させないことがあります。これにより、他の要素がスクロールやクリックできなくなる可能性があります。

インストール

JavaScript
Angular
Angular (スタンドアロン)
React
Vue

Ionic CoreとJavaScriptを使用する開発者は、@ionic/coreの最新バージョンをインストールする必要があります。

import { createGesture } from 'https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/esm/index.mjs';

...

const gesture = createGesture({
  el: elementRef,
  threshold: 15,
  gestureName: 'my-gesture',
  onMove: ev => onMoveHandler(ev)
});

Ionic CoreとTypeScriptを使用する開発者は、@ionic/coreの最新バージョンをインストールする必要があります。

import { createGesture, Gesture } from '@ionic/core';

...

const gesture: Gesture = createGesture({
  el: elementRef,
  threshold: 15,
  gestureName: 'my-gesture',
  onMove: ev => onMoveHandler(ev)
});

Angularを使用する開発者は、@ionic/angularの最新バージョンをインストールする必要があります。アニメーションは、AnimationControllerの依存性注入によって作成できます。

デフォルトでは、ジェスチャーコールバックはNgZone内では実行されません。開発者は、ジェスチャーを作成するときにrunInsideAngularZoneパラメーターをtrueに設定するか、コールバックをNgZone.run()呼び出しでラップできます。

import { Gesture, GestureController } from '@ionic/angular';

...

constructor(private gestureCtrl: GestureController) {
  const gesture: Gesture = this.gestureCtrl.create({
    el: this.element.nativeElement,
    threshold: 15,
    gestureName: 'my-gesture',
    onMove: ev => this.onMoveHandler(ev)
  }, true);
  // The `true` above ensures that callbacks run inside NgZone.
}

import { Gesture, GestureController } from '@ionic/angular/standalone';

...

constructor(private gestureCtrl: GestureController) {
  const gesture: Gesture = this.gestureCtrl.create({
    el: this.element.nativeElement,
    threshold: 15,
    gestureName: 'my-gesture',
    onMove: ev => this.onMoveHandler(ev)
  }, true);
  // The `true` above ensures that callbacks run inside NgZone.
}

Reactを使用する開発者は、@ionic/reactの最新バージョンをインストールする必要があります。完全なReactラッパーは近日公開予定です！

import { createGesture, Gesture } from '@ionic/react';

...

const gesture: Gesture = createGesture({
  el: elementRef,
  threshold: 15,
  gestureName: 'my-gesture',
  onMove: ev => onMoveHandler(ev)
});

Ionic Vueを使用する開発者は、@ionic/vueの最新バージョンをインストールする必要があります。

import { createGesture } from '@ionic/vue';
import { ref } from 'vue';

...

const elementRef = ref();

...

const gesture = createGesture({
  el: elementRef.value,
  threshold: 15,
  gestureName: 'my-gesture',
  onMove: ev => onMoveHandler(ev)
});

基本的なジェスチャー

この例では、アプリはion-content要素のジェスチャーをリッスンします。ジェスチャーの動きが開始されると、onStart関数が呼び出され、色付きのボックスシャドウを追加するためにion-cardにクラスが追加されます。ジェスチャーの動きが検出されると、onMove関数が呼び出され、アプリはion-card内に現在のジェスチャー情報を出力します。最後に、ジェスチャーの動きが終了すると、onEnd関数が呼び出され、カスタムクラスがion-cardから削除されます。

ダブルクリックジェスチャー

以下の例では、要素でのダブルクリックを検出できるようにする必要があります。thresholdを0に設定することで、ジェスチャーオブジェクトがクリックを検出できるようにします。さらに、ダブルクリックとしてカウントされるために連続して発生する必要があるクリックのしきい値を定義します。