有没有办法在 Ionic 5 中组合选项卡和侧边菜单

Question

有没有办法让菜单按钮位于其中一个选项卡内，如图所示， 我在几个论坛中进行了搜索，只发现按钮 dle mene 将其放置在标题的顶部，但没有发现菜单按钮是选项卡的选项之一

Answer 1

首先使用选项卡创建离子应用程序 在app.component.html中只需添加此代码

<ion-app>
  <ion-split-pane contentId="main-content" when="false">
    <ion-menu contentId="main-content" type="overlay">
      <ion-content>
        <ion-list>
          <ion-list-header>Inbox</ion-list-header>
          <ion-note>[email protected]</ion-note>
          <ion-menu-toggle autoHide="false" *ngFor="let p of pages">
            <ion-item [routerLink]="[p.url]" routerLinkActive="selected" routerDirection="root" lines="none" detail="false">
              <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-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

在 app.component.ts 中添加页面数组并自定义页面

pages = [
    {
      title: 'Login',
      url: '/tabs/tab1',
      icon: 'log-in'
    },
    {
      title: 'Contact',
      url: '/tabs/tab2',
      icon: 'person'
    },
    {
      title: 'About',
      url: '/tabs/tab3',
      icon: 'information-circle'
    }
  ];

在 tabs-routing.module.ts 中，只需添加一个新路由“tab4”，并且不要提供任何像这样的 child 或 loadchildren 属性。如果你没有在路线中给出选项卡 4 那么它会显示错误

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },

      {
        path: 'tab4',
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
})
export class TabsPageRoutingModule {}

然后在 tabs.page.html 中添加此代码

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>


    <ion-tab-button tab="tab4">
      <ion-menu-button></ion-menu-button>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

评论或从页面标题中删除

<ion-menu-button></ion-menu-button>

如果您有任何不明白的地方，请告诉我，我将使用正确的项目结构创建并与您共享 github 存储库

Answer 2

使用选项卡创建您的项目。

ionic start projectName tabs

使用以下代码更新您的

app.component.html

：

<ion-app>
  <ion-split-pane contentId="main-content" when="false">
    <ion-menu contentId="main-content" type="overlay">
      <ion-content>
        <ion-list>
          <ion-list-header>Inbox</ion-list-header>
          <ion-note>[email protected]</ion-note>
          <ion-menu-toggle autoHide="false" *ngFor="let p of pages">
            <ion-item [routerLink]="[p.url]" routerLinkActive="selected" routerDirection="root" lines="none" detail="false">
              <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-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

更新您的

app.component.ts

pages = [
    {
      title: 'Login',
      url: '/tabs/tab1',
      icon: 'log-in'
    },
    {
      title: 'Contact',
      url: '/tabs/tab2',
      icon: 'person'
    },
    {
      title: 'About',
      url: '/tabs/tab3',
      icon: 'information-circle'
    }
  ];

对于基于 Ionic 5 的完整演示存储库： https://github.com/Saqib92/ionic5-tabs-sidemenu

Answer 3

@MaBbKhawaja 的解决方案让我上路了，但它对我来说有一些问题。

1. 菜单的离子标签对齐错误。
2. 点击区域比其他选项卡小，只有图标起作用，点击图标周围的选项卡不会触发菜单。

如果有人遇到同样的“问题”，这是我用来让它工作的解决方案：

将此添加到 ion-tab-bar html 中：

<ion-tab-button tab="menu" (click)="toggleMenu()">
  <ion-icon name="menu-outline"></ion-icon>
  <ion-label>Menu</ion-label>
</ion-tab-button>

然后在tab.ts文件中：

import { MenuControlle } from '@ionic/angular';

//Add the menuController to the constructor:

private menuCtrl: MenuController

// Add this function, make sure to use the menuId here of the ion-menu:

toggleMenu() {
   this.menuCtrl.open('main`');
}