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: :slight_smile:](https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=5)
2 Likes
Just doing a #push, because I couldnāt figure it out yet and still need help ![:slight_smile: :slight_smile:](https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=5)
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: :slight_smile:](https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=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!
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
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.