Ionic4.x 新增底部 tabs 頁面

1、創建 tab4 模塊

 

ionic g page tab4

 

2、修改根目錄里 app-routing.module.ts 文件里面的路由配置，去掉默認增加的路由

3、tabs.router.module.ts 中新增路由

 

{
path: 'tab4', loadChildren: '../tab4/tab4.module#Tab4PageModule'
}

 

4、tabs.page.html 中新增底部 tab 切換按鈕

 

<ion-tabs>

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

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab4">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Tab four</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>