LoginSignup
5
4

More than 5 years have passed since last update.

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

Posted at

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:

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

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4