Cử chỉ vuốt/kéo dọc trong ionic 2

Question

Tôi cần sử dụng cử chỉ vuốt/vuốt trong ứng dụng Ionic 2. Khi tôi làm

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

Sau đó tôi someFunction(e) đang được gọi, nhưng chỉ trên ngang slide - do đó tôi không thể nghe swipes trong lên xuống hướng. (swipeup) và (swipedown) dường như không làm gì cả. Bạn có bất kỳ ý tưởng cho dù điều này là có thể ở tất cả với các phiên bản beta Ionic?

Answer 1

Chỉ cần cập nhật, giờ đây Ionic có các điều khiển cử chỉ. thấy

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

cử chỉ trả về một đối tượng $event. Bạn có thể sử dụng dữ liệu này để kiểm tra xem đó có phải là sự kiện vuốt ve/swipedown hay không.

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

Answer 2

Ionic 2 làm cho sử dụng thư viện hammerjs để xử lý những cử chỉ của nó.

Họ cũng đã xây dựng lớp Gesture của riêng họ hoạt động hiệu quả như một trình bao bọc cho hammerjs: Gesture.ts.

Vì vậy, bạn có thể thực hiện chỉ thị riêng của bạn như:

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

Mã này cho phép bạn làm điều gì đó như thế này:

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