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.

Suggest me any advance tips for my web page Forum Submission Sites

Thank for this code hope this work for my 5starprocessing.