Ionic4.x 新增底部 tabs 页面
阅读原文时间:2023年07月08日阅读:1

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 切换按钮


Tab One

<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>  

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章