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>

巴特西

Ionic4.x 新增底部 tabs 页面

最新文章

热门文章