Scorrimento verticale/trascinamento del gesto in ionico 2

Question

Devo usare i gesti swipeup/swipedown in un'applicazione Ionic 2. Quando faccio

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

Poi il mio someFunction(e) viene chiamato, ma solo su orizzontali slides - quindi sono in grado di ascoltare i colpi in su e in giù le direzioni. (swipeup) e sembrano non fare nulla. Hai idea se questo sia possibile con Ionic beta?

Answer 1

Solo un aggiornamento, Ionic ora dispone di controlli gestuali. vedi

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

gesti restituiscono un oggetto $event. Probabilmente puoi utilizzare questi dati per verificare se si tratta di un evento swipeup/swipownown.

See $event screenshot (since I can't attach images yet ;))

Answer 2

ionico 2 fa uso hammerjs libreria per gestire i suoi gesti.

Hanno anche creato la propria classe Gesture che funge efficacemente da wrapper per hammerjs: Gesture.ts.

in modo da poter fare la propria direttiva, come:

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

Questo codice permette di fare qualcosa di simile:

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