ionic 头部和底部

Ionic 头部（Header）和底部（Footer / TabBar）完全实操指南

（Ionic 7+，适用于 Angular / React / Vue 都一样）

1. 标准页面布局（最常用结构）

<!-- 完整页面 = Header + Content + Footer -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>我的订单</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="openSearch()">
        <ion-icon name="search"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- 页面主要内容 -->
  <p>这里是滚动内容区域...</p>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title size="small">© 2025 我的App</ion-title>
  </ion-toolbar>
</ion-footer>

2. 常见头部样式（直接复制就美）

样式名称	代码示例	效果说明
透明头部（内容上滑时自动着色）	<ion-header translucent="true">	很常用，背景图页面必备
折叠大标题（Collapsible Large Title）	<ion-header collapse="condense">	iOS 大标题，上滑时变小
双行标题	用 <ion-title size="large"> + 子标题	商品详情页常用
带搜索栏的头部	<ion-searchbar> 放在 toolbar 里
渐变/图片背景头部	CSS 自定义 background

热门组合示例：带大标题 + 透明 + 背景图

<ion-header translucent="true" collapse="condense">
  <ion-toolbar>
    <ion-title size="large">个人中心</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  <!-- 背景图放在 content 最顶部 -->
  <div class="header-bg">
    <img src="/assets/images/profile-bg.jpg" />
  </div>
  <!-- 内容 -->
</ion-content>

.header-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 300px;
}
.header-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. 底部 TabBar（标准底部导航）

<!-- app.component.html 根页面 -->
<ion-app>
  <ion-tabs>
    <ion-tab-bar slot="bottom" color="primary">

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

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

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

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

小技巧：

• 想让某个页面隐藏底部 TabBar：在对应页面加：

  <ion-tabs>
    <ion-router-outlet></ion-router-outlet>
  </ion-tabs>

然后在页面组件 ts 中：

  import { IonTabs } from '@ionic/angular';
  @ViewChild(IonTabs) tabs!: IonTabs;

  ngAfterViewInit() {
    this.tabs.outlet.canGoBack().then(can => {
      // 根据路由决定是否隐藏
    });
  }

更简单方法：在要隐藏的页面加类名：

  <ion-content class="ion-no-padding has-tabs-hidden"></ion-content>

CSS：

  .has-tabs-hidden + ion-tab-bar { display: none !important; }

4. 固定在页面底部的操作栏（非 TabBar）

常用于商品详情页的“加入购物车 + 立即购买”按钮

<ion-footer class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button fill="outline">联系客服</ion-button>
    </ion-buttons>

    <ion-button fill="solid" color="warning" expand="block">
      加入购物车
    </ion-button>
    <ion-button fill="solid" color="danger" expand="block">
      立即购买
    </ion-button>
  </ion-toolbar>
</ion-footer>

CSS 让它不被键盘遮挡（重要！）：

ion-footer {
  position: sticky;
  bottom: 0;
}

5. 快速记忆表

组件	放哪里	常用场景
<ion-header>	页面最顶部	标题、返回、搜索
<ion-toolbar>	header / footer 里	放按钮、标题
<ion-title>	toolbar 里	页面标题
<ion-footer>	页面最底部	版权、固定操作按钮
<ion-tab-bar slot="bottom">	<ion-tabs> 里	全局底部导航
translucent="true"	header 上	透明头部 + 内容全屏
collapse="condense"	header 上	iOS 大标题折叠

这样写出来的 Ionic 页面，iOS 和 Android 都非常原生漂亮！

需要我给你一个「完整可复制的带大标题 + 透明头部 + 底部 TabBar」项目模板吗？一句话就发你～