问如何在同一页上制作两个离子侧边菜单？离子
EN

Stack Overflow用户

提问于 2020-07-05 21:06:24

回答 1查看 841关注 0票数 1

我正在做一个离子项目，我想有一个左边的菜单和一个右边的菜单，并在中间的内容。

我的问题是我只能放置一个离子菜单。我试着把两个都放进去，但只出现了一个。

我在放置的地方遇到的问题是，因为离子文档上的两个菜单都有一个。

这是我的代码：

菜单: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菜单。

ionic3

angular

ionic-framework

回答 1

Stack Overflow用户

发布于 2020-07-05 23: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>