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

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

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

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

Ответ 1

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

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

Жесты

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

Смотрите скриншот $event (поскольку я еще не могу прикреплять изображения;))

Ответ 2

Ionic 2 использует библиотеку hammerjs для обработки своих жестов.

Theyve также построил свой собственный класс 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()">