Determinare se un evento di scorrimento è per uno swipe sinistro o uno swipe destro

Question

Sto usando Angular 2 e ionic 2 e sto provando a catturare swipe sinistro e destro. Posso acquisire uno swipe, ma non riesco a capire come determinare se è uno swipe sinistro o destro.

Nel mio html ho:

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

Ciò richiede swipeEvent ogni volta che si verifica un colpo.

mio swipeEvent codice javascript simile a questo:

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

Come faccio a determinare se si tratta di un colpo a sinistra oa destra.

Answer 1

Sembra che i gesti siano costruiti su HammerJS come indicato nello Ionic 2 docs.

You can target specific gestures to trigger specific functionality. Built on top of Hammer.js...

quando si attiva un evento magnetica un oggetto viene passato al metodo associato contiene un'opzione e.direction che è un valore numerico corrispondente ad una direzione magnetica.

Di seguito si riporta l'elenco delle costanti di direzione che sono definiti here nella documentazione 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 

Esempio

Data la tua ion-content configurazione

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

Utile suggerimento

012.

In alternativa (non sembra che Ionic lo abbia trattato nei documenti gestuali), è possibile utilizzare HammerJS events nel tag HTML per indirizzare una direzione di scorrimento specifica.

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

L'ho trovato solo per tentativi ed errori e sembrava funzionare per la maggior parte degli eventi!

Answer 2

È CAB legano i gestori di eventi separati con ionico, come:

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

Si può anche utilizzare on-swipe come:

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

} 

Utilizzando ionico 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

Answer 3

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> 

TYPESCRIPT

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

se deltaX> 0 scorri verso destra il resto Scorri verso sinistra. Mi piace usare pan invece di swipe perché voglio fare un'immagine della diapositiva stessa Scrollyeah

Answer 4

solo per aggiornare - come di ionica 3.19.0, la funzionalità è la seguente:

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

e

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

Inoltre - una soluzione ancora più veloce in linea, se siete solo interessati con fendenti a destra ea sinistra: