web-dev-qa-db-fra.com

Déterminer si un événement de balayage concerne un balayage à gauche ou à droite

J'utilise Angular 2 et ionic 2 et j'essaie de capturer les balayages gauche et droit. Je peux capturer un balayage mais je ne peux pas déterminer comment déterminer s'il s'agit d'un balayage à gauche ou à droite.

Dans mon html j'ai:

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

Ceci appelle swipeEvent chaque fois qu'un balayage est effectué.

Mon code javascript swipeEvent ressemble à ceci:

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

Comment puis-je déterminer s'il s'agit d'un balayage à gauche ou à droite?.

javascriptionic-frameworkangularionic2
15
Bill Noble

Il semble que les gestes soient construits sur HammerJS comme indiqué dans le Ionic 2 docs . 

Vous pouvez cibler des gestes spécifiques pour déclencher des fonctionnalités spécifiques . Construit sur le dessus de Hammer.js ...

Lorsque vous déclenchez un événement de balayage, un objet est transmis à la méthode liée. Il contient une option e.direction, qui est une valeur numérique correspondant à la direction du balayage. 

Ci-dessous la liste des constantes de direction définies ici dans la documentation HammerJS

   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

Exemple

Étant donné votre configuration ion-content

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

Astuce utile

Alternativement (il ne semble pas que Ionic ait couvert cela dans leur doc de gestes), vous pouvez utiliser HammerJS events dans la balise HTML pour cibler une direction de balayage spécifique. 

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

Seulement découvert cela par essais et erreurs et cela semblait fonctionner pour la plupart des événements!

42
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>

typographie

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);
    }
}

si deltaX> 0 balayez vers la droite, puis balayez vers la gauche ... je préfère utiliser pan au lieu de swipe parce que je veux créer une diapositive identique à Scrollyeah

3
vuhung3990

Vous pouvez lier des gestionnaires d’événements séparés avec Ionic, par exemple:

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

Vous pouvez aussi utiliser on-swipe comme:

<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)

}

Utilisation de 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

0
vorillaz

Juste pour mettre à jour - depuis Ionic 3.19.0, la fonctionnalité est la suivante:

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

et

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();
    }
}

En outre, une solution en ligne encore plus rapide, si vous êtes uniquement concerné par les balayages gauche et droit:

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