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

Ionic Framework ionic-v3
1

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?

2

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?

3

Inside that specific page, you can try

4

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

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)

6

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

7

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

8

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;
}
9

Glad you got it working! :slight_smile:

10

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:

11

it doesn’t go that way, if you need support because you are facing a bug, display your code because it contains the issue

12

Sorry, I have solved my problem.

Thank you for the support!

13

Is there a Solution for Ionic 4

14

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
})
15

Thank you for your Reply. But i want to disable it only on a specific Page. Not globally.

16

Yep sorry don’t know. Hope you gonna find!

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().

18

nice solution , thanks