web-dev-qa-db-ja.com

垂直スワイプ/ドラッグジェスチャーionic 2

Ionic 2アプリケーションで、スワイプアップ/スワイプダウンジェスチャーを使用する必要があります。

_<div (swipe)='someFunction($event)'></div>
_

次に、someFunction(e)が呼び出されていますが、horizo​​ntalスライドでのみ-したがって、上下方向のスワイプを聞く。 _(swipeup)_および_(swipedown)_はそうではないようです何でもします。 Ionic betaでこれがまったく可能かどうか何か考えがありますか？

javascriptionic-frameworkionic2
14
Michał Siwek

Ionic 2はhammerjsライブラリを使用してそのジェスチャーを処理します。

また、hammerjsのラッパーとして効果的に機能する独自のGestureクラスGesture.tsも作成しました。

したがって、次のような独自のディレクティブを実行できます。

import {Directive, ElementRef, Input, OnInit, OnDestroy} from 'angular2/core'
import {Gesture} from 'ionic-angular/gestures/gesture'
declare var Hammer: any

/*
  Class for the SwipeVertical directive (attribute (swipe) is only horizontal).

  In order to use it you must add swipe-vertical attribute to the component.
  The directives for binding functions are [swipeUp] and [swipeDown].

  IMPORTANT:
  [swipeUp] and [swipeDown] MUST be added in a component which
  already has "swipe-vertical".
*/

@Directive({
  selector: '[swipe-vertical]' // Attribute selector
})
export class SwipeVertical implements OnInit, OnDestroy {
  @Input('swipeUp') actionUp: any;
  @Input('swipeDown') actionDown: any;

  private el: HTMLElement
  private swipeGesture: Gesture
  private swipeDownGesture: Gesture

  constructor(el: ElementRef) {
    this.el = el.nativeElement
  }

  ngOnInit() {
    this.swipeGesture = new Gesture(this.el, {
      recognizers: [
          [Hammer.Swipe, {direction: Hammer.DIRECTION_VERTICAL}]
      ]
    });
    this.swipeGesture.listen()
    this.swipeGesture.on('swipeup', e => {
        this.actionUp()
    })
    this.swipeGesture.on('swipedown', e => {
        this.actionDown()
    })
  }

  ngOnDestroy() {
    this.swipeGesture.destroy()
  }
}

このコードを使用すると、次のようなことができます。

<div swipe-vertical [swipeUp]="mySwipeUpAction()" [swipeDown]="mySwipeDownAction()">
2
Zineb Errahmouni

更新のみ、Ionicにジェスチャーコントロールが追加されました。

http://ionicframework.com/docs/v2/components/#gestures

ジェスチャーは$eventオブジェクトを返します。このデータを使用して、それがswipeup/swipedownイベントであるかどうかを確認できます。

$ eventスクリーンショットを参照してください（まだ画像を添付できないため;））

1
Karl Patrick Espiritu