离子3启用单页的滑动

Question

我在root组件和模块config

中都禁用了全球滑动'

<ion-nav #appNav [root]="rootPage" swipeBackEnabled="false"></ion-nav>
...
IonicModule.forRoot(MobileApplication, {swipeBackEnabled: false}),
...

我只需要仅启用一个页面。因此，我试图通过将导航实例传递给构造函数，然后将SwipeBackenabled设置为true。

。

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

记录SwipeBackenabled和Cangoback返回true，但Canswipeback返回false。如果我在模板中的某个地方添加了一个滑动事件并在右滑动中登录这些值，则将所有值登录为true。但是，什么都没有发生，似乎滑动不起作用吗？我想念什么吗？

供参考，我正在使用离子3.9.2和 @ionic/app-scripts 3.1.4。预先感谢

Answer 1

我不完全确定这里的技巧是什么，但是以下设置使它对我有用：

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

AppNav这是Ionic NavController的实例。我还不完全理解为什么在其他生命周期挂钩中设置SwipeBackenable没有做到这一点，因此我将在以后继续进行调查。对于可能遇到同一问题的人来说，这可能是一个起点。

Answer 2

这样做，就像我给了main-menu一样，为您的离子菜单创建一个ID。在您的控制器部分中访问它。

app.html

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

在您的app.component.ts文件中，将以下代码放在构造函数内

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

因此，以上代码可作为禁用侧菜单以通过整个应用程序打开功能。

假设您要在一个页面中仅打开侧面菜单，请添加以下代码

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

这将使滑动可以打开侧面菜单功能。

注意：使用SwipeEnable（true，'main-menu'）;这将能够访问整个应用程序。在解决方案中，它仅在一个页面上使用的页面和禁用是对当前页面尊重的上一页，下一页。

仅在当前页面上启用它，并将其禁用在该当前页面的正面和背面

更新：

在同一页面上启用并将其禁用的另一种方法。

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

并使用ionviewdidleave

在同一页面上禁用它

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

因此，以上代码将执行启用和禁用侧菜的方法