web-dev-qa-db-ja.com

スワイプイベントが左スワイプ用か右スワイプ用かを決定する

Angular 2 and ionic 2を使用し、左右のスワイプをキャプチャしようとしています。スワイプをキャプチャできますが、決定方法を判断できません。左右にスワイプした場合。

私のHTMLには次のものがあります：

<ion-content (swipe)="swipeEvent($event)">

これは、スワイプが発生するたびにswipeEventを呼び出します。

私のswipeEvent javascriptコードは次のようになります。

swipeEvent(event){
        alert('swipe');
    }

左または右のスワイプかどうかを判断するにはどうすればよいですか。

javascriptionic-frameworkangularionic2
17
Bill Noble

Ionic 2 docs で述べられているように、ジェスチャーは HammerJS の上に構築されているようです。

特定のジェスチャーをターゲットにして、特定の機能をトリガーできます。 Hammer.jsの上に構築...

スワイプイベントをトリガーすると、オブジェクトはバインドされたメソッドに渡され、オプションe.directionこれは、スワイプの方向に対応する数値です。

以下は、HammerJSドキュメントで定義されている here の方向定数のリストです。

   Name              Value
DIRECTION_NONE         1
DIRECTION_LEFT         2
DIRECTION_RIGHT        4
DIRECTION_UP           8
DIRECTION_DOWN         16
DIRECTION_HORIZONTAL   6
DIRECTION_VERTICAL     24
DIRECTION_ALL          30

例

あなたのion-content セットアップ

swipeEvent(e) {
    if (e.direction == 2) {
        //direction 2 = right to left swipe.
    }
}

役に立つヒント

または（Ionicジェスチャドキュメントでこれを説明しています）のように見えません）、HTMLタグで HammerJSイベント を使用して特定のスワイプ方向をターゲットにできます。

<ion-content (swipeleft)="swipeLeftEvent($event)">

これは試行錯誤によってのみ発見され、ほとんどのイベントで機能するように見えました！

48
Will.Harris

html

<ion-navbar *navbar>
  <ion-title>Main</ion-title>
</ion-navbar>

<ion-content padding class="main">
    // height: 300px; background-color: #000;  => visible for test
    <div (pan)='swipeEvent($event)'></div>
</ion-content>

タイプクリップ

export class MainPage {
    constructor(public nav: NavController) { }

    swipeEvent($e) {
        // swipe left $e.direction = 2;

        // pan for get fired position
        console.log($e.deltaX+", "+$e.deltaY);
    }
}

deltaX> 0の場合は右にスワイプし、そうでない場合は左にスワイプします。スライド画像を Scrollyeah と同じにしたいので、panの代わりにswipeを使用したい

3
vuhung3990

次のように、個別のイベントハンドラーをIonicでバインドします。

<ion-content on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()">

次のようなon-swipeを使用することもできます。

<ion-content on-swipe="swiped($event)">

$scope.swiped = function($e) {
  var what = '';
  switch ($e.gesture.direction) {
    case 'up':
      what = 'Swiped up';
      break;
    case 'down':
      what = 'Swiped down';
      break;
    case 'left':
      what = 'Swiped left';
      break;
    case 'right':
      what = 'Swiped right';
      break;
    default:
      what = 'Swiped ???';
      break;
  }
  alert(what)

}

Ionic 2を使用

<ion-content (swipe)="swipeEvent($event)">


swipeEvent($e) {
  var what = '';
  switch ($e.gesture.direction) {
    case 'up':
      what = 'Swiped up';
      break;
    case 'down':
      what = 'Swiped down';
      break;
    case 'left':
      what = 'Swiped left';
      break;
    case 'right':
      what = 'Swiped right';
      break;
    default:
      what = 'Swiped ???';
      break;
  }
  alert(what)
}

Ionic Docs

1
vorillaz

更新するだけ-Ionic 3.19.0の時点で、機能は次のとおりです。

<div (swipe)="swipeEvent($event)" />

そして

swipeEvent($e) {
    if($e.offsetDirection == 4){
        // Swiped right, for example:
        this.week.prevWeek();
    } else if($e.offsetDirection == 2){
        // Swiped left, for example:
        this.week.nextWeek();
    }
}

また、左右のスワイプのみに関心がある場合は、さらに高速なインラインソリューション：

<div (swipe)="($event.direction === 4) ? calendar.back() : calendar.forward()" />
0
Grant