Ionic Tabs导航 #

Tabs结构
    │
    ├── Tabs容器
    │   ├── ion-tabs
    │   └── ion-tab-bar
    │
    ├── Tab按钮
    │   └── ion-tab-button
    │
    └── Tab页面
        ├── Tab1页面
        ├── Tab2页面
        └── Tab3页面

<!-- tabs/tabs.page.html -->
<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>首页</ion-label>
    </ion-tab-button>
    
    <ion-tab-button tab="search">
      <ion-icon name="search"></ion-icon>
      <ion-label>搜索</ion-label>
    </ion-tab-button>
    
    <ion-tab-button tab="cart">
      <ion-icon name="cart"></ion-icon>
      <ion-label>购物车</ion-label>
      <ion-badge>3</ion-badge>
    </ion-tab-button>
    
    <ion-tab-button tab="profile">
      <ion-icon name="person"></ion-icon>
      <ion-label>我的</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

// tabs/tabs.router.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
      },
      {
        path: 'search',
        loadChildren: () => import('../search/search.module').then(m => m.SearchPageModule)
      },
      {
        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'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

// tabs/tabs.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { TabsPage } from './tabs.page';
import { TabsPageRoutingModule } from './tabs.router.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TabsPageRoutingModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

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

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

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

import { Component } from '@angular/core';
import { CartService } from './cart.service';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html'
})
export class TabsPage {
  cartCount = 0;
  
  constructor(private cartService: CartService) {
    this.cartService.cartCount$.subscribe(count => {
      this.cartCount = count;
    });
  }
}

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

// 选中状态显示实心图标
ion-tab-button {
  .icon-filled {
    display: none;
  }
  
  &.tab-selected {
    .icon-outline {
      display: none;
    }
    
    .icon-filled {
      display: block;
    }
  }
}

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html'
})
export class HomePage {
  constructor(private router: Router) {}
  
  goToCart() {
    this.router.navigate(['/tabs/cart']);
  }
  
  goToProfile() {
    this.router.navigateByUrl('/tabs/profile');
  }
}

<ion-tabs (ionTabsDidChange)="onTabChange($event)">
  <ion-tab-bar slot="bottom">
    <!-- tab buttons -->
  </ion-tab-bar>
</ion-tabs>

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

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html'
})
export class TabsPage {
  onTabChange(event: any) {
    console.log('当前Tab:', event.tab);
  }
}

// 在Tab内导航到子页面
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html'
})
export class HomePage {
  constructor(private router: Router) {}
  
  goToDetail(id: string) {
    // 导航到详情页（不在Tabs中）
    this.router.navigate(['/detail', id]);
  }
}

// home/home-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: HomePage
  },
  {
    path: 'category/:id',
    component: CategoryPage
  },
  {
    path: 'product/:id',
    component: ProductPage
  }
];

// 从首页导航到子页面
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html'
})
export class HomePage {
  constructor(private router: Router) {}
  
  goToCategory(id: string) {
    this.router.navigate(['/tabs/home/category', id]);
  }
  
  goToProduct(id: string) {
    this.router.navigate(['/tabs/home/product', id]);
  }
}

<!-- 子页面返回按钮 -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/home"></ion-back-button>
    </ion-buttons>
    <ion-title>产品详情</ion-title>
  </ion-toolbar>
</ion-header>

// Tab栏背景
ion-tab-bar {
  --background: #ffffff;
  --color: #999999;
  --color-selected: #3880ff;
  height: 60px;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid #e0e0e0;
}

// Tab按钮样式
ion-tab-button {
  --color: #999999;
  --color-selected: #3880ff;
  --color-focused: #3880ff;
  --padding-top: 8px;
  --padding-bottom: 8px;
  
  ion-icon {
    font-size: 24px;
    margin-bottom: 4px;
  }
  
  ion-label {
    font-size: 12px;
  }
}

<ion-tabs>
  <ion-tab-bar slot="top">
    <ion-tab-button tab="tab1">
      <ion-label>标签1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-label>标签2</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

<ion-tabs>
  <ion-tab-bar slot="bottom" class="custom-tab-bar">
    <ion-tab-button tab="home" class="custom-tab-button">
      <div class="tab-icon">
        <ion-icon name="home"></ion-icon>
      </div>
      <ion-label>首页</ion-label>
    </ion-tab-button>
    
    <!-- 中间凸起按钮 -->
    <ion-tab-button tab="add" class="center-button">
      <div class="add-icon">
        <ion-icon name="add"></ion-icon>
      </div>
    </ion-tab-button>
    
    <ion-tab-button tab="profile" class="custom-tab-button">
      <div class="tab-icon">
        <ion-icon name="person"></ion-icon>
      </div>
      <ion-label>我的</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

.custom-tab-bar {
  height: 70px;
  padding-bottom: env(safe-area-inset-bottom);
}

.center-button {
  --color: #ffffff;
  
  .add-icon {
    width: 50px;
    height: 50px;
    background: #3880ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -25px;
    box-shadow: 0 4px 12px rgba(56, 128, 255, 0.3);
    
    ion-icon {
      font-size: 28px;
      color: #ffffff;
    }
  }
}

// Ionic默认保持Tab状态
// 每个Tab有独立的导航栈

// 首页
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html'
})
export class HomePage implements OnInit {
  items: any[] = [];
  scrollPosition = 0;
  
  ngOnInit() {
    this.loadData();
  }
  
  ionViewWillLeave() {
    // 保存滚动位置
    this.scrollPosition = this.getScrollPosition();
  }
  
  ionViewWillEnter() {
    // 恢复滚动位置
    this.scrollToPosition(this.scrollPosition);
  }
}

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html'
})
export class HomePage {
  // 每次进入Tab时刷新
  ionViewWillEnter() {
    this.refreshData();
  }
  
  async refreshData() {
    // 刷新数据
  }
}

推荐：3-5个Tab
- 太少：浪费空间
- 太多：难以点击

推荐：
- 使用系统图标
- 保持风格一致
- 语义清晰

不推荐：
- 混用不同风格图标
- 使用过于复杂的图标

推荐：
- 简短明确（2-4个字）
- 统一字数
- 语义清晰

不推荐：
- 过长的标签文字
- 中英文混用