Ionic 4：侧边菜单（ion-menu）在 IOS 中没有正确关闭
Posted
技术标签:
【中文标题】Ionic 4：侧边菜单（ion-menu）在 IOS 中没有正确关闭【英文标题】：Ionic 4: Side menu (ion-menu) does not close properly in IOS 【发布时间】：2020-05-24 19:49:43 【问题描述】：我正在使用 IONIC 4 为 android 和 ios 开发应用程序。
我添加了一个侧边菜单（ion-menu），它在 android 上完美运行。
但在 IOS 中它给我带来了问题，菜单完美打开。但是当我想关闭菜单时。以图形方式关闭菜单，但当我尝试与应用程序交互时，只有侧边菜单中的选项被激活。
只有侧边菜单项有用，应用程序的其余部分被取消。
这是过程。
主页正常：
我打开侧边菜单：
我关闭菜单：
所有这些选项都被阻止：
但是这个选项仍然被激活，即使菜单已经被隐藏了。
这只发生在IOS，我的规范：
我的代码：
<ion-menu side="start" content-id="main-content">
<ion-header class="headermenu">
<div class="spacioemenuleft">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
<img style="width:18.9vw; height:10.6vh; border-radius: 50%;" src="pictureusuariomenu" >
</div> </div> </div>
</div>
<div class="spacioemenuright">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div class="textsaldo2" [innerhtml]="fullname"></div>
<div class="bloque">
<div style="float:left; width:70%; height:100%" class="textsaldo2">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
PIN: pinusuario
</div> </div> </div>
</div>
<div style="float:right; width:30%; height:100%; background-color:white;" (click)="copyText()">
<img style="width:100%; height:100%" src="assets/imgs/compartir-b.png" >
</div>
</div>
<span class="error ion-padding" style="color:white; font-weight:bold; margin-top:1em; padding-top:0em;" *ngIf="registrado">
PIN COPIADO!!!
</span>
</div>
</div>
</div>
</ion-header>
<ion-content >
<div class="ion-padding">
<div class="espacio2 margenboton" routerLink="/recargarsaldo">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
Recargar Saldo
</div> </div> </div>
</div>
<ion-list>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/profile">
<img style="width:2.7vh; height:2.7vh;" src="assets/imgs/perfil.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/profile">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Mi perfil
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/notificaciones">
<img style="width:2.7vh; height:2.7vh;" src="assets/imgs/11notificaciones.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/notificaciones">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Notificaciones
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%;padding:0.8em;" routerLink="/misretiros" >
<img style="width:2.7vh; height:2.7vh;" src="assets/imgs/6dolares.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/misretiros">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Mis retiros
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/historial">
<img style="width:2.7vh; height:2.7vh;" src="assets/imgs/11historial.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/historial">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Historial
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/contacto">
<img style="width:2.7vh; height:2.7vh;" src="assets/imgs/contact5.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/contacto">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Contáctanos
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;">
<img style="width:2.7vh; height:2.6vh;" src="assets/imgs/7cerrar.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;" (click)="cerrarsession();" >
Cerrar sesión
</div> </div> </div>
</div>
</ion-item>
</ion-list>
</div>
<div style="height: 15vh; background-color:#F3F3F3; padding:0.2em;">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;" >
<div style="float:left; width:40%; height:100%;" >
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:right;">
<p class="textblue2" style="font-weight:bold;">En alianza con:</p>
</div> </div> </div>
</div>
<div style="float:left; width:60%; height:100%; padding:0.1em; padding-top: 0.6em;" >
<img style="width:80%; height:auto" src="assets/imgs/Grupo517.png" >
</div>
</div> </div> </div>
</div>
</ion-content>
</ion-menu>
有什么想法吗？
【问题讨论】：
【参考方案1】：<IonContent>
... other page components
authenticated ? <Menu/> : null
</IonContent>
或者我在示例中所做的甚至没有在用户未通过身份验证时呈现包含菜单的路由器代码
if (!authInfo || !authInfo.initialized)
return (
<IonApp>
<IonLoading isOpen=true />
</IonApp>
);
else
return (
<IonApp>
<>
authInfo?.loggedIn === true ? (
<IonReactRouter>
<IonSplitPane contentId="main">
<Menu />
<IonRouterOutlet id="main">
<Route path="/page/:name" component=Page exact />
<Route path="/tabs" component=TabRootPage />
<Redirect from="/" to="/tabs" exact />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
) : (
<IonReactRouter>
<Route
path="/create-account"
component=CreateAccountPage
exact
/>
<Route path="/login" component=LoginPage exact />
<Redirect from="/" to="/login" exact />
</IonReactRouter>
)
</>
</IonApp>
);
在此处查看完整的应用程序和源代码：https://github.com/aaronksaunders/ionic-sidemenu-tabs-auth-starter
【讨论】：
以上是关于Ionic 4：侧边菜单（ion-menu）在 IOS 中没有正确关闭的主要内容，如果未能解决你的问题，请参考以下文章