我发现这个问题的公认答案真的很有帮助,但发现它也禁用了滑动关闭手势。
有没有办法让它只在打开菜单时禁用,而不是关闭它?尝试关闭它时,我发现它有点无响应,并认为滑动手势可以修复它。我在 Ionic 文档中找不到任何关于它的内容。
<ion-menu [content]="content" [swipeEnabled]="false">...</ion-menu>
在 Ionic 中没有默认的方法可以做到这一点,但您可以使用 ionOpen
和 ionClose
回调来处理何时应启用或禁用滑动功能:
- 打开菜单后启用滑动功能,因此可用于关闭菜单
- 关闭菜单后禁用滑动功能,因此无法用于打开菜单
工作扑克。
视图
<ion-menu persistent="true" [content]="content"
(ionOpen)="enableSwipe()" <!-- Enable it when opening -->
(ionClose)="disableSwipe()"> <!-- Disable it when closing -->
<ion-header>
<ion-toolbar color="primary">
<ion-title>Side menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
元件
import { Component, ViewEncapsulation } from '@angular/core';
import { MenuController } from 'ionic-angular';
import { HomePage } from '../pages/home/home';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
public rootPage: any = HomePage;
constructor(private menuCtrl: MenuController) {}
ngAfterViewInit() {
this.disableSwipe();
}
public enableSwipe(): void {
this.menuCtrl.swipeEnable(true);
}
public disableSwipe(): void {
this.menuCtrl.swipeEnable(false);
}
}