On iOS, there is the swipe to go back gesture. This works now fine since Ionic2 RC.2
But in one of my use case, I’ve got a wizard, which I built with slides, in a sub page. I allowed the user to use swipe to go to next or prev step of my wizard.
And there I face the problem. The user could swipe back to go to prev slide but that same action also trigger the go back gesture, kind of a conflict.
Therefore, as I did for the hardware back button on android, I want to override this function “go back gesture” in that specific page. Any idea how to achieve that?
3 Likes
So I guess I kind of have to set swipeBackEnabled=false to achieve that.
But I don’t want to disable the all swipe back gestures for my all application but only for that one specific page.
Anyone knows how to disable swipeBack for only one speicific page?
1 Like
Ellezo
November 7, 2016, 9:52am
3
Inside that specific page, you can try
Thx for the idea. But how could that work, where does “swipeBackEnabled” in your example comes from?
Ellezo
November 7, 2016, 11:01am
5
Just a clarification. Is this the scenario that you want to accomplish?
Parent page → child page (your specific page) → sub-child page
child can’t swipe back to parent but sub-child can swipe back to child
If so, inside your parent controller (ts)
@ViewChild (Nav) myNav: Nav; /* or instantiate Nav inside constructor(public myNav: Nav) {} */
ionViewWillLeave() {
this.myNav.swipeBackEnabled = false;
}
/* Not sure if this is necessary */
ionViewWillUnload() {
this.myNav.swipeBackEnabled = true;
}
Thx for the clarification and example of code, gonna try that later today, looks good, I think it will work with your idea, I’m confident
I’ve got following scenario:
Root page (accessed thru setRoot) -> Child page (accessed thru navController.push)
In my child page I gonna enable and disable the swipe on ionViewDidEnter and ionViewDidLeave
Ellezo
November 7, 2016, 11:21am
7
Please let me know if you accomplished this. Thanks
Super duper works like a charm! Thx a lot @Ellezo
In the child page:
constructor(private nav:Nav) {}
ionViewWillEnter() {
this.nav.swipeBackEnabled = false;
}
ionViewWillLeave() {
this.nav.swipeBackEnabled = true;
}
8 Likes
I am sorry i did not understand, ive tried and nothings work. can i hv the full code? im sorry im still new to ionic
it doesn’t go that way, if you need support because you are facing a bug, display your code because it contains the issue
Sorry, I have solved my problem.
Thank you for the support!
Is there a Solution for Ionic 4
Didn’t tried out, I just dibbled the overall swipe back
In core:
import {setupConfig} from '@ionic/core';
setupConfig({
swipeBackEnabled: false
});
In Angular:
IonicModule.forRoot({
swipeBackEnabled: false
})
1 Like
Thank you for your Reply. But i want to disable it only on a specific Page. Not globally.
Yep sorry don’t know. Hope you gonna find!
pfleigo
September 9, 2019, 12:41pm
17
I was looking for the same. I could make it work with the help of this blog post: http://www.damirscorner.com/blog/posts/20190823-SwipebackGestureConfigurationInIonic4.html
Instead of the service, I injected IonRouterOutlet directly into the controller of the page, where I want to disable the swipe back functionality:
// myPage.ts:
import { IonRouterOutlet } from '@ionic/angular';
export class MyPage {
constructor(private routerOutlet: IonRouterOutlet) {}
ionViewWillEnter() {
this.routerOutlet.swipeGesture = false;
}
ionViewWillLeave() {
this.routerOutlet.swipeGesture = true;
}
}
Of course you can also put it into other lifecycle hooks like ngOnInit()
or ngOnDestroy()
.
5 Likes