如何在同一页上制作两个离子侧边菜单？离子
如何在同一页上制作两个离子侧边菜单？离子
提问于 2020-07-06 05:06:24
我正在做一个离子项目，我想有一个左边的菜单和一个右边的菜单，并在中间的内容。
我的问题是我只能放置一个离子菜单。我试着把两个都放进去，但只出现了一个。
我在放置的地方遇到的问题是，因为离子文档上的两个菜单都有一个。
这是我的代码：
菜单:1：
<ion-split-pane contentId="main" >
<!-- the side menu -->
<ion-menu side="start" menu-id="test1">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<!-- the main content -->
<ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane> 菜单2：
<ion-split-pane contentId="main" >
<!-- the side menu -->
<ion-menu side="start" menu-id="test1">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<!-- the main content -->
<ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>主要内容：
<ion-header>
<ion-toolbar>
<ion-title>Receitas</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-menu-button slot="start">TEste</ion-menu-button>
<ion-menu-button slot="end">TEste</ion-menu-button>
</ion-content>这些文件都是分开的文件。
我想要的是：
但是当我运行页面时，只显示了一个菜单，即start菜单。
回答 1
Stack Overflow用户
发布于 2020-07-06 07:00:09
您需要向app.component.html添加另一个离子菜单，并确保添加了“side”属性：
<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu side="start" contentId="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<ion-list-header>Inbox</ion-list-header>
<ion-note>hi@ionicframework.com</ion-note>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
<ion-list id="labels-list">
<ion-list-header>Labels</ion-list-header>
<ion-item *ngFor="let label of labels" lines="none">
<ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
<ion-label>{{ label }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
<ion-menu side="end" contentId="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<ion-list-header>Inbox</ion-list-header>
<ion-note>hi@ionicframework.com</ion-note>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
<ion-list id="labels-list">
<ion-list-header>Labels</ion-list-header>
<ion-item *ngFor="let label of labels" lines="none">
<ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
<ion-label>{{ label }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
</ion-split-pane>
</ion-app>现在，为了在每个页面中添加菜单按钮，您需要添加另一个ion- menu -button，并使用"menu“属性来指示它控制哪一侧：
<ion-header [translucent]="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button menu="start"></ion-menu-button>
</ion-buttons>
<ion-title>{{ folder }}</ion-title>
<ion-buttons slot="end">
<ion-menu-button menu="end"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>上面我使用的是标准的sidemenu ionic应用程序(ionic启动，然后选择sidemenu应用程序模板)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62746330
复制相关文章
相似问题
腾讯云开发者
