[SOLVED] Override swipe to go back gesture (swipeBackEnabled only on one selected page)

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

Inside that specific page, you can try

Thx for the idea. But how could that work, where does “swipeBackEnabled” in your example comes from?

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)

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 :slight_smile:

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

Please let me know if you accomplished this. Thanks :slight_smile:

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

Glad you got it working! :slight_smile:

2 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 :frowning:

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 :wink:

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!

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

nice solution , thanks