Posted at

Ionic 2でサポートされているジェスチャーまとめ

More than 1 year has passed since last update.

Ionic 2にはtappresspanswiperotatepinchといったアプリ操作に欠かせないジェスチャーが用意されています。ありがたし:relaxed:

Gestures | Ionic Component Documentation

ジェスチャーはボタンなどのUIに設定することが多いと思いますが、そのUIに指を乗せてスワイプしてもスクロールできないショッキングな出来事に遭遇します。ジェスチャーの挙動的には正しいかもしれないですが、スクロールして見ていく画面では操作しづらくなってしまい致命的です:confounded:

とは言えユーザー入力はなくせないので、別のイベントで代用すると回避できるものもあります。

備忘録も兼ねてまとめておきます。


tap(タップ)

<button (tap)="handler()"></button>

UIに指を置いた状態でもスクロールさせたい場合は、clickに置換えます。

<button (click)="handler()"></button>


press(長押し)

<button (press)="handler()"></button>


pan(ドラッグ)

<button (pan)="handler()"></button>


rotate(回転)

<button (rotate)="handler()"></button>


swipe(スワイプ)

<button (swipe)="handler()"></button>


pinch(ピンチ)

<button (pinch)="handler()"></button>


なかなか代用できませんでした。。

即席で代用できたのはtappressだけでした。Ionic 2で実装するときは、ユーザー入力とスクロールがバッティングしないように気をつけたほうがいいですね。長押しはmousedownから数秒たったら適応するなどはできそうですが:sweat:

他にいい方法があったらぜひご教示お願いします!