离子侧边菜单错误

Posted 2023-03-22

【中文标题】离子侧边菜单错误

【英文标题】：Ionic side menu bug

【发布时间】：2019-05-08 13:05:13

【问题描述】：

当我启动我的 ionic 应用程序时，它有时会以不同的菜单“布局”开始

前两张图片是布局结果的第一个示例。在第三张图片中是第二个布局。

https://imgur.com/5oZKyfZ

https://imgur.com/zLm52Ur

https://imgur.com/gEpbdYH

我尝试在 <ion-menu-button></ion-menu-button> 上添加标签，例如 autoHide。

我的 app.component.html 代码：

<ion-app>
    <ion-split-pane>
        <ion-menu *ngIf="Auth" side="start">
            <ion-header>
                <ion-toolbar>
                    <ion-title>SocialApp</ion-title>
                </ion-toolbar>
            </ion-header>
            <ion-content>
                <ion-list>
                    <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
                        <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
                            <ion-icon padding-end [name]="p.icon"></ion-icon>
                            <ion-label>
                                p.title
                            </ion-label>
                        </ion-item>
                    </ion-menu-toggle>
                </ion-list>
            </ion-content>
        </ion-menu>
        <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
</ion-app>

以及其中一页的代码

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button ></ion-menu-button>
        </ion-buttons>
        <ion-title>
             'header.map' | translate 
        </ion-title>
        <ion-button (click)="help.showHelp('map')" slot="end">
            <ion-icon icon="help"></ion-icon>
        </ion-button>
    </ion-toolbar>
</ion-header>

<ion-content>
    <div id="map"></div>
</ion-content>

我希望始终在屏幕上获得相同的布局，而不是有时获得一个或另一个。

如果有人可以帮助我解释为什么会发生这种情况以及我可以如何防止这种情况发生，将不胜感激。

【参考方案1】：

ion-split-pane 会根据设备屏幕尺寸https://ionicframework.com/docs/api/split-pane 吐出。如果您希望它永久用于第一个，您可以这样做<ion-split-pane when="xs"> 或永久用于第二个<ion-split-pane disabled='true'> 或特定数量<ion-split-pane when="500">。如果不调整浏览器的大小，就无法复制您的体验：/