Swiping between pages (up or down)

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 Likes

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

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.

2 Likes

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

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!

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!

2 Likes

I could not do to work your example [marcusthatsme].
I’m using the release version 4 of ionic and I have errors like:
ERROR in src/directives/myswipe/myswipe.ts(22,33): error TS2693: ‘Gesture’ only refers to a type, but is being used as a value here.
[ng] src/directives/myswipe/myswipe.ts(27,27): error TS2339: Property ‘listen’ does not exist on type ‘Gesture’.
[ng] src/directives/myswipe/myswipe.ts(28,27): error TS2339: Property ‘on’ does not exist on type ‘Gesture’.
[ng] src/directives/myswipe/myswipe.ts(31,27): error TS2339: Property ‘on’ does not exist on type ‘Gesture’.
Could you provide a full demo on ionic 4 release version?
I really appreciate it.
Thanks.

Reply

Bookmark Share Flag Reply

Tracking

You will see a count of new replies because you posted a reply to this topic.

Suggested Topics

Topic Replies Views Activity
Make API call before page load 1

ionic-v3|10|10.6k|Apr '18|
|[SOLVED] [Ionic 4] Need to know how to work the Modal Controller 4 7

ionic|24|12.3k|Dec '18|
|Issues with new Google restrictions on permissions

ionic-v3|0|5|39m|
|App rejected by play store

ionic-v3|4|52|1h|
|Build error on Ionic 3

ionic-v3|2|19|5h|

There are 2 unread and 44 new topics remaining, or browse other topics in ionic-v3

Well, that’s because that code is designed to be used with ionic-v3. I’m going to be looking into upgrading my app this month to ionic 4, I’ll update the example and this post once this aspect is updated.

Did you have the chance to upgrade the code for Ionic 4 ? I did something with hammer is but it’s only working on IOS devices and in Android is very slow…
Thanks.