Ionic 3 enable swipe back for a single page

问题

I've disabled 'swipe back' globally, both in root component and module config

<ion-nav #appNav [root]="rootPage" swipeBackEnabled="false"></ion-nav>

...
IonicModule.forRoot(MobileApplication, {swipeBackEnabled: false}),
...

I need though to enable it for one page only. So'm trying to set it by passing a nav instance to constructor and then setting swipeBackEnabled to true.

ionViewWillEnter() {
    this.nav.swipeBackEnabled = true;
    console.log('swipeBackEnabled ' + this.nav.swipeBackEnabled);
    console.log('canGoBack ' + this.nav.canGoBack());
    console.log('canSwipeBack ' + this.nav.canSwipeBack());
}

Logging swipeBackEnabled and canGoBack returns true, but canSwipeBack returns false. If I add a swipe event somewhere in my template and log those values on right swipe, it logs all the values as true. However, nothing happens, seems like swipe back is not working? Am I missing something?

For reference, I'm using Ionic 3.9.2 and @ionic/app-scripts 3.1.4. Thanks in advance

回答1:

I'm not completely sure what did the trick here, but the following setup made it work for me:

public ionViewWillEnter(): void {
    this.appNav.swipeBackEnabled = true;
}

public ionViewDidLeave(): void {
    this.appNav.swipeBackEnabled = false;
}

appNav here is an instance of ionic NavController. I don't yet fully understand why setting swipeBackEnabled in other lifecycle hooks didn't make it, so I'll continue investigating later on. This might be a starting point for someone who might encounter same issue though.

回答2:

to do this create an id for your ion-menu like i have given main-menu. to access it in your controller part.

app.html

<ion-menu [content]="appNav" id="main-menu">
....
....
</ion-menu>
<ion-nav #appNav [root]="rootPage" swipeBackEnabled="false"></ion-nav>

inside your app.component.ts file place the below code inside your constructor

  menuCtrl.swipeEnable(false, 'main-menu');

so the above code acts as disabling the side menu swipe to open functionality through entire app.

lets say you want to enable the swipe to open side menu in only one page so add the below code

this.menuCtrl.swipeEnable(true, 'main-menu');

this will enable the swipe to open the side menu functionality.

Note: Once you used the swipeEnable(true,'main-menu'); this will be able to access to the entire app. Inorder to resolve it use in only one the respeted page page and disable is to the previous page and next page respected to the current page.

only enable it on the current page and disable it on the front and back page of that current page

UPDATE:

another way to achive this is enable and disable it on the same page.

ionViewDidEnter(){
    this.menuCtrl.swipeEnable(true, 'main-menu');
}

and disable it on the same page by using ionviewdidleave

ionViewDidLeave(){
    this.menuCtrl.swipeEnable(false, 'main-menu');
}

So the above code will do the both method enabling and disabling the side-menu

来源：https://stackoverflow.com/questions/47636697/ionic-3-enable-swipe-back-for-a-single-page

标签

angular

ionic-framework

ionic2