onic tab(选项卡)

Ionic Tabs（选项卡/底部导航）完整中文讲解

（适用于 Ionic 7 / 8，Angular、React、Vue 都支持，一次讲透！）

1. 最标准的底部 Tab 结构（推荐这样写）

<!-- app.component.html（全局根布局） -->
<ion-app>
  <ion-tabs>
    <!-- 选项卡内容区域 -->
    <ion-tab-bar slot="bottom">

      <ion-tab-button tab="home">
        <ion-icon name="home-outline"></ion-icon>
        <ion-label>首页</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="category">
        <ion-icon name="grid-outline"></ion-icon>
        <ion-label>分类</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="cart">
        <ion-icon name="cart-outline"></ion-icon>
        <ion-label>购物车</ion-label>
        <ion-badge color="danger" *ngIf="cartCount > 0">{{ cartCount }}</ion-badge>
      </ion-tab-button>

      <ion-tab-button tab="mine">
        <ion-icon name="person-outline"></ion-icon>
        <ion-label>我的</ion-label>
      </ion-tab-button>

    </ion-tab-bar>
  </ion-tabs>
</ion-app>

<!-- 每个 tab 对应的页面内容 -->
<ion-router-outlet></ion-router-outlet>

2. 路由配置（Angular 为例，Ionic 7+ 推荐 Standalone 方式）

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      { path: 'home',     loadComponent: () => import('./pages/home/home.page').then(m => m.HomePage) },
      { path: 'category', loadComponent: () => import('./pages/category/category.page').then(m => m.CategoryPage) },
      { path: 'cart',     loadComponent: () => import('./pages/cart/cart.page').then(m => m.CartPage) },
      { path: 'mine',     loadComponent: () => import('./pages/mine/mine.page').then(m => m.MinePage) },
      { path: '',         redirectTo: 'home', pathMatch: 'full' }
    ]
  },
  {
    path: '',
    redirectTo: 'tabs/home',
    pathMatch: 'full'
  }
];

3. TabsPage 页面代码（几乎可以是空的）

// tabs.page.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss'],
})
export class TabsPage {
  constructor() {}
}

4. 动态小红点 / Badge 示例（购物车）

// cart.service.ts 或全局状态
cartCount = 3;

// 在任何页面更新都会实时显示
this.cartCount = 99;

5. 选中状态自动高亮 + 图标切换（推荐写法）

<ion-tab-button tab="home" href="/tabs/home">
  <ion-icon 
    [name]="currentPath === '/tabs/home' ? 'home' : 'home-outline'">
  </ion-icon>
  <ion-label>首页</ion-label>
</ion-tab-button>

更简单的方式（Ionic 自动处理）：

<!-- 直接写两个图标，Ionic 会自动切换 -->
<ion-icon name="home-outline"></ion-icon>        <!-- 未选中 -->
<ion-icon name="home"></ion-icon>                <!-- 选中时自动显示这个 -->

6. 顶部 Tab（不常见，但也可以）

<ion-tabs>
  <ion-tab-bar slot="top">
    <ion-tab-button tab="tab1">
      <ion-label>精选</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-label>热门</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

7. 编程方式切换 Tab

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

onTabChange(event: TabsCustomEvent) {
  console.log('当前 tab:', event.detail.tab);
}

// 跳转到指定 tab
this.location.go('/tabs/cart');

8. React 版本示例（ionic-react）

<IonTabs>
  <IonRouterOutlet>
    <Route path="/tabs/home" component={Home} />
    <Route path="/tabs/mine" component={Mine} />
    <Route exact path="/tabs" render={() => <Redirect to="/tabs/home" />} />
  </IonRouterOutlet>

  <IonTabBar slot="bottom">
    <IonTabButton tab="home" href="/tabs/home">
      <IonIcon icon={home} />
      <IonLabel>首页</IonLabel>
    </IonTabButton>
    <IonTabButton tab="mine" href="/tabs/mine">
      <IonIcon icon={person} />
      <IonLabel>我的</IonLabel>
    </IonTabButton>
  </IonTabBar>
</IonTabs>

9. 最佳实践总结（99% 的项目都这么写）

1. 把 <ion-tabs> 放在最外层 app.component.html
2. 所有页面都放在 tabs/ 下面
3. 路由统一以 /tabs/xxx 形式书写
4. 购物车、消息等常用加 <ion-badge>
5. 图标使用 outline（未选中）和 fill（选中）两套

官方文档（中文）

https://ionicframework.com/docs/api/tabs

需要我直接给你打包一个「完整可运行的 Ionic 8 + Angular 17 底部 Tab 项目模板」吗？
（包含路由、懒加载、徽章、暗黑模式，一键复制就能跑）
直接说「要 Angular」「要 React」「要 Vue」就行～