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

Question

菜单按钮是否位于其中一个选项卡中，如图所示， 我在几个论坛中搜索过，我只发现按钮 dle mene 将它放在标题的顶部，但没有一个菜单按钮是选项卡的选项之一

Answer 1

使用选项卡创建您的项目。 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>hi@ionicframework.com</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 2

首先使用标签创建您的离子应用程序 在 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>hi@ionicframework.com</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 数组并自定义您的页面

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”，不要给任何 children 或 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 存储库并与您共享