ionic 选项卡栏操作

Ionic 选项卡栏（Tabs）是 2025 年移动端 App 最核心的布局之一。下面直接给你 最新、最全、最好用的完整操作指南（支持 Ionic 7/8，Angular/React/Vue 全覆盖），包括所有常见需求和坑。

1. 标准底部选项卡栏（2025 年官方推荐写法）

Angular（最完整）

<!-- app.component.html（根布局） -->
<ion-app>
  <ion-tabs>
    <ion-tab-bar slot="bottom" color="primary">

      <ion-tab-button tab="home">
        <ion-icon name="home-outline"></ion-icon>
        <ion-label>首页</ion-label>
        <ion-badge *ngIf="homeBadge > 0">{{homeBadge}}</ion-badge>
      </ion-tab-button>

      <ion-tab-button tab="category">
        <ion-icon name="apps-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="profile">
        <ion-icon name="person-outline"></ion-icon>
        <ion-label>我的</ion-label>
      </ion-tab-button>

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

<!-- app-routing.module.ts（重点！） -->
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      { path: 'home',     loadChildren: () => import('../home/home.module').then(m => m.HomePageModule) },
      { path: 'category', loadChildren: () => import('../category/category.module').then(m => m.CategoryPageModule) },
      { path: 'cart',     loadChildren: () => import('../cart/cart.module').then(m => m.CartPageModule) },
      { path: 'profile',  loadChildren: () => import('../profile/profile.module').then(m => m.ProfilePageModule) },
      { path: '', redirectTo: '/tabs/home', pathMatch: 'full' }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

React（2025 年最简洁写法）

// App.tsx
<IonApp>
  <IonReactRouter>
    <IonTabs>
      <IonRouterOutlet>
        <Route exact path="/tabs/home"     component={Home} />
        <Route exact path="/tabs/category" component={Category} />
        <Route exact path="/tabs/cart"     component={Cart} />
        <Route exact path="/tabs/profile"  component={Profile} />
        <Redirect exact from="/" to="/tabs/home" />
      </IonRouterOutlet>

      <IonTabBar slot="bottom">
        <IonTabButton tab="home" href="/tabs/home">
          <IonIcon icon={homeOutline} />
          <IonLabel>首页</IonLabel>
          {badge > 0 && <IonBadge color="danger">{badge}</IonBadge>}
        </IonTabButton>
        {/* 其他 tab 同理 */}
      </IonTabBar>
    </IonTabs>
  </IonReactRouter>
</IonApp>

2. 2025 年最常用 10 种高级操作（直接复制）

需求	解决方案（2025 最优）
动态红点 / Badge	<ion-badge>99+</ion-badge> 直接放 ion-tab-button 里
切换 Tab 时保留滚动位置	ion-router-outlet 加 animated="false" 或用 @ionic/react-hooks 的 useIonRouter
隐藏底部 TabBar（登录页）	this.tabsOutlet.getNativeElement().style.display = 'none' 或用 CSS 类控制
中间凸起的 + 按钮	见下面完整代码（抖音/淘宝风格）
点击 Tab 不重复加载页面	默认行为就是不重复加载！除非你手动加了 selectedTab 监听
自定义选中颜色	--color-selected 变量（见下方 global.scss）
跳转到其他 Tab 并传参	this.router.navigate(['/tabs/cart'], { extras: { state: { from: 'detail' } } })

3. 2025 年最火的“中间大按钮”选项卡栏（抖音/淘宝同款）

<!-- global.scss 关键样式 -->
ion-tab-bar {
  height: 68px;
  padding-bottom: env(safe-area-inset-bottom);  // 刘海屏适配
  padding-top: 8px;
  background: var(--ion-background-color);

  &::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background: var(--ion-color-primary);
    border-radius: 50%;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  }
}

ion-tab-button:nth-child(3) {  <!-- 中间那个 -->
  margin-top: -25px;
  z-index: 10;

  ion-icon {
    font-size: 32px;
    color: white;
  }

  ion-label { display: none; }
}

<!-- HTML 结构 -->
<ion-tab-button tab="publish">
  <ion-icon name="add-circle-outline"></ion-icon>
</ion-tab-button>

4. 全局美化（2025 年最流行的样式，放 global.scss）

ion-tab-bar {
  --color: #8c8c8c;
  --color-selected: var(--ion-color-primary);
  --background: #ffffff;
  border-top: 1px solid #eee;
  height: 60px;
  padding-bottom: env(safe-area-inset-bottom);  // 适配 iPhone 刘海

  ion-tab-button {
    --ripple-color: transparent;
  }

  ion-icon {
    font-size: 24px;
    margin-bottom: 4px;
  }

  ion-label {
    font-size: 12px;
    font-weight: 500;
  }

  ion-badge {
    position: absolute;
    top: 8px;
    right: 30%;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
  }
}

5. 程序化控制 Tabs（超级实用）

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

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

// 跳转到指定 tab
this.location.replaceState('/tabs/cart');
this.router.navigate(['/tabs/cart']);

// React
const { routeInfo } = useIonRouter();
if (routeInfo.pathname.includes('cart')) { ... }

总结：2025 年最推荐的完整模板结构

src/
 └─ app/
     ├─ tabs/
     │    └─ tabs.page.html   ← 放 <ion-tabs> 和 <ion-tab-bar>
     ├─ home/                 ← 首页模块
     ├─ category/             ← 分类模块
     ├─ cart/                 ← 购物车模块
     └─ profile/              ← 我的模块

把上面代码直接复制到你的项目，5 分钟就能拥有一个丝滑、美观、带红点、支持中间大按钮的现代 Ionic 选项卡栏！

需要「未读消息红点自动更新」「点击发布按钮弹出底部滑动框」「登录后自动隐藏 tabbar」等高级功能，直接说，我立刻给你完整代码！