javascript - Vertical swipedrag gesture in ionic 2 - Stack Overflow

admin管理员组

文章数量:1289759

I need to use the swipeup/swipedown gestures in an Ionic 2 application. When I do

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

Then my someFunction(e) is being called, but only on horizontal slides -- therefore I'm unable to listen to swipes in up and down directions. (swipeup) and (swipedown) seem not to do anything at all. Do you have any idea whether this is possible at all with the Ionic beta?

I need to use the swipeup/swipedown gestures in an Ionic 2 application. When I do

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

Then my someFunction(e) is being called, but only on horizontal slides -- therefore I'm unable to listen to swipes in up and down directions. (swipeup) and (swipedown) seem not to do anything at all. Do you have any idea whether this is possible at all with the Ionic beta?

• javascript
• ionic-framework
• ionic2

Share Improve this question Follow edited Apr 15, 2016 at 15:49 Denis Bubnov 2,79555 gold badges3333 silver badges5656 bronze badges asked Mar 14, 2016 at 14:10 Michał SiwekMichał Siwek 80411 gold badge1313 silver badges2525 bronze badges 4

• Did you figure out how to do it? – brians69 Commented Feb 13, 2017 at 3:25
• @drbishop unfortunately, I just implemented it from the ground up myself :( – Michał Siwek Commented Feb 14, 2017 at 10:46
• Do you still need a soulution? – Duannx Commented Sep 22, 2017 at 5:01
• @Duannx as I said, already implemented it from the ground up :( – Michał Siwek Commented Sep 25, 2017 at 10:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Ionic 2 makes use hammerjs library to handle its gestures.

They’ve also built their own Gesture class that effectively acts as a wrapper to hammerjs: Gesture.ts.

So you can do your own directive like:

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 ponent.
  The directives for binding functions are [swipeUp] and [swipeDown].

  IMPORTANT:
  [swipeUp] and [swipeDown] MUST be added in a ponent 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()
  }
}

This code allows you to do something like this:

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

Just an update, Ionic now has gesture controls. see

http://ionicframework./docs/v2/ponents/#gestures

gestures return an $event object. You can probably use this data to check whether if it's a swipeup/swipedown event.

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

本文标签： javascriptVertical swipedrag gesture in ionic 2Stack Overflow