Swiping between pages (up or down)


#1

Hi everyone!

My basic question is: How do you swipe between pages up and down? I would like to have it so the page transition gets animated just as if you push a page on the navCtrl. Let me explain in more detail.

Here is my code for being able to swipe left and right:

HTML:

<ion-content (swipe)="swipeEvent($event)" padding>
  <ion-list>
    <button ion-item *ngFor="let item of items">
      {{ item.text }}
    </button>
  </ion-list>
</ion-content>

Typescript:

  swipeEvent(e) {
    if (e.direction == 4) {
      this.navCtrl.pop();
    }
  }

I use direction == 2 for the swipe left to get to the page (push) and swipe right to go back (pop). The animation then transitions the page in from right to left, when I push. And the animations shows the page being wiped out from left to right when I pop.

So my questions are:
Is there a more efficient way to swipe between pages (left / right)?
How do I get the swipeEvent to recognize up and down (e.direction == 8 / 16 for up and down doesn’t work)?
How do I get the page to be animated, that it transitions in from bottom to top when I push and transitions away from top to bottom when I pop?

I use Ionic 3.x on iOS Sierra on Mac.

Any help is much appreciated! Thank you for your help in advance :slight_smile:


#2

Just doing a #push, because I couldn’t figure it out yet and still need help :slight_smile:


#3

Hey,

I ran into the same problem, took me a couple of hours to hunt down the solution (I’m new to all this), but here was my solution:

I grabbed this code from plunker that I found:

import {Directive, ElementRef, Output, OnInit, OnDestroy, EventEmitter} from '@angular/core';
import {Gesture} from 'ionic-angular/gestures/gesture';
declare var Hammer: any;

@Directive({
    selector: '[swipe-vertical]' // Attribute selector
})
export class SwipeVertical implements OnInit, OnDestroy {
    @Output() onSwipeUp = new EventEmitter();
    @Output() onSwipeDown = new EventEmitter();

    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.onSwipeUp.emit({ el: this.el });
        });
        this.swipeGesture.on('swipedown', e => {
            this.onSwipeDown.emit({ el: this.el });
        });
    }

    ngOnDestroy() {
        this.swipeGesture.destroy();
    }
}

Then in my “app.module.ts” file I added
import { SwipeVertical } from “…/directory_to_my_file/swipe-vertical.directive.ts”;

and I added “SwipeVertical” to @NgModule in the “declarations” section.

Then I just updated my HTML to support it:

<ion-content class="home" (swipe)="swipeEvent($event)" swipe-vertical (onSwipeUp)="onSwipeUp($event)" (onSwipeDown)="onSwipeDown($event)">

    <h2 class="center">My7Section</h2> 
   
</ion-content>

It all works, least it does with my app.


#4

Sounds dope! Gonna test it tomorrow and let you know if it works for me too :slight_smile:


#5

I’m trying to implement this on my code and I cannot see where you change of page. Can you post the code Html you have page1 and page2.
Thanks!


#6

Figured I’d take a bit of time tonight to write an article on this:

https://www.lessonstutorials.com/ionic-swipe-up-down

You can download the full source code here:

https://www.lessonstutorials.com/demos

Hope that helps!