Ionic Tab 基本用法

Ionic 框架提供了强大的选项卡组件，允许开发者在应用底部或顶部创建导航选项卡。以下是最基础的实现方式：

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    
    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

每个选项卡需要对应的路由组件：

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
      },
      {
        path: 'settings',
        loadChildren: () => import('../settings/settings.module').then(m => m.SettingsPageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
      }
    ]
  }
];

带徽章的选项卡

可以在选项卡上添加通知徽章，增强用户交互体验：

<ion-tab-button tab="notifications">
  <ion-icon name="notifications"></ion-icon>
  <ion-label>Notifications</ion-label>
  <ion-badge color="danger">5</ion-badge>
</ion-tab-button>

自定义选项卡样式

通过CSS可以完全自定义选项卡外观：

ion-tab-bar {
  --background: #2c3e50;
  --color: #ecf0f1;
  --color-selected: #f39c12;
  
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

ion-tab-button {
  --padding-bottom: 8px;
  --padding-top: 8px;
}

动态控制选项卡

通过JavaScript可以动态控制选项卡行为：

import { Component } from '@angular/core';
import { IonTabs } from '@ionic/angular';

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

  selectTab(tab: string) {
    this.tabs.select(tab);
  }

  getSelectedTab(): string {
    return this.tabs.getSelected();
  }
}

懒加载优化

对于大型应用，建议使用懒加载提高性能：

{
  path: 'tabs',
  component: TabsPage,
  children: [
    {
      path: 'catalog',
      children: [
        {
          path: '',
          loadChildren: () => import('../catalog/catalog.module').then(m => m.CatalogPageModule)
        }
      ]
    }
  ]
}

嵌套路由处理

处理选项卡内的深层路由时，需要特殊配置：

{
  path: 'tabs',
  component: TabsPage,
  children: [
    {
      path: 'products/:id',
      loadChildren: () => import('../product-detail/product-detail.module').then(m => m.ProductDetailPageModule)
    }
  ]
}

选项卡切换事件

监听选项卡切换事件实现特定逻辑：

import { Component } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html'
})
export class TabsPage {
  onTabChange(event: CustomEvent) {
    console.log('Tab changed:', event.detail.tab);
    // 实现自定义逻辑
  }
}

在模板中绑定事件：

<ion-tabs (ionTabsDidChange)="onTabChange($event)">
  <!-- 选项卡内容 -->
</ion-tabs>

高级选项卡模式

实现顶部选项卡与滑动内容联动：

<ion-tabs>
  <ion-tab-bar slot="top">
    <ion-tab-button tab="feed">
      <ion-label>Feed</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="messages">
      <ion-label>Messages</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
  
  <ion-tab tab="feed">
    <ion-content>
      <!-- Feed内容 -->
    </ion-content>
  </ion-tab>
  
  <ion-tab tab="messages">
    <ion-content>
      <!-- Messages内容 -->
    </ion-content>
  </ion-tab>
</ion-tabs>

性能优化技巧

对于内容复杂的选项卡，使用ion-router-outlet提升性能：

<ion-tabs>
  <ion-tab tab="dashboard">
    <ion-router-outlet name="dashboard"></ion-router-outlet>
  </ion-tab>
  <ion-tab tab="analytics">
    <ion-router-outlet name="analytics"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

对应路由配置：

{
  path: 'tabs',
  component: TabsPage,
  children: [
    {
      path: 'dashboard',
      outlet: 'dashboard',
      loadChildren: () => import('../dashboard/dashboard.module').then(m => m.DashboardPageModule)
    },
    {
      path: 'analytics',
      outlet: 'analytics',
      loadChildren: () => import('../analytics/analytics.module').then(m => m.AnalyticsPageModule)
    }
  ]
}