Жест по вертикали/перетаскиванию в ионной форме 2

Question

Мне нужно использовать жесты swipeup/swipedown в приложении Ionic 2. Когда я

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

Тогда мой someFunction(e) вызывается, но только на горизонтальных горок - поэтому я не могу слушать пойло в направлениях вверх и вниз. (swipeup) и (swipedown), похоже, ничего не делают. Вы вообще не знаете, возможно ли это вообще с помощью Ionic beta?

Answer 1

Просто обновление, ионный теперь имеет элементы управления жестов. см

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

жесты возвращают $event объект. Вероятно, вы можете использовать эти данные, чтобы проверить, является ли это событием swipeup/swipedown.

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

Answer 2

Ионные 2 использует hammerjs библиотеку для обработки его жесты.

Они также создали свой собственный класс Gesture, который эффективно действует как обертка для hammerjs: 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()">