Ionic 中最常用的「固定头部 + 底部」写法（2025 年最新 Ionic 7+ 规范，已适配 iOS 刘海屏、安全区、暗黑模式）
一、最标准、最常用的布局（推荐 99% 项目都用这个）
<!-- src/app/tab1/tab1.page.html -->
<ion-app>
<!-- 固定顶部栏（带返回按钮 + 标题） -->
<ion-header>
<ion-toolbar color="primary">
<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-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<!-- 可选：副标题栏 / 搜索栏 / 分段控件 -->
<!--
<ion-toolbar>
<ion-segment value="all">
<ion-segment-button value="all">全部</ion-segment-button>
<ion-segment-button value="fav">收藏</ion-segment-button>
</ion-segment>
</ion-toolbar>
-->
</ion-header>
<!-- 内容区（会自动适配安全区、支持下拉刷新、滚动） -->
<ion-content class="ion-padding" fullscreen="true">
<!-- fullscreen=true 才能让内容顶到状态栏下面（透明沉浸式头部用） -->
<h1>这里是内容区</h1>
<p>滚动时头部和底部会固定不动</p>
<!-- 随便放点内容测试滚动 -->
<div style="height:2000px;">长内容用来测试滚动...</div>
</ion-content>
<!-- 固定底部栏（TabBar 之外的自定义底部） -->
<ion-footer>
<ion-toolbar color="light">
<div class="footer-actions">
<ion-button expand="block" fill="clear" (click)="save()">
<ion-icon slot="start" name="save-outline"></ion-icon>
保存
</ion-button>
<ion-button expand="block" color="primary" (click)="submit()">
<ion-icon slot="start" name="paper-plane-outline"></ion-icon>
提交订单
</ion-button>
</div>
</ion-toolbar>
</ion-footer>
</ion-app>二、几种常见的头部 + 底部变体（直接复制就行）
| 需求 | 代码片段（直接粘到 ion-header / ion-footer 里） |
|---|---|
| 透明沉浸式头部（内容顶到状态栏下） | <ion-header translucent="true">然后在 ion-content 加 fullscreen="true" |
| 大标题模式（iOS 风格） | “`html |
| 超大标题 | |
| 底部安全区（适配 iPhone 小黑条） | `<ion-footer class="ion-safe-area-bottom">` < 自动生效，或者手动加 CSS |
| 底部 TabBar（系统自带） | 不需要自己写，项目用 `ionic start xxx tabs` 就自动有了 |
| 固定底部操作栏（带阴影） | ```css
ion-footer ion-toolbar {
--border-width: 0;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}|
三、完整 CSS（放 global.scss 全局生效）
/* 透明沉浸式头部背景（常见电商/外卖风格） */
ion-header.translucent-header {
background: transparent;
backdrop-filter: blur(10px);
}
ion-header.translucent-header ion-toolbar {
--background: transparent;
--border-width: 0;
}
/* 底部安全区补白（重要！） */
.ion-safe-area-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
/* 底部操作栏常见样式 */
.footer-actions {
display: flex;
ion-button { flex: 1; margin: 0; }
}四、一键复制的最美模板（2025 最流行风格）
<ion-header translucent="true">
<ion-toolbar class="translucent-header">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>商品详情</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen="true">
<!-- 内容顶到状态栏下面 -->
<img src="..." style="width:100%; height:400px; object-fit:cover;">
<div class="ion-padding">...</div>
</ion-content>
<ion-footer class="ion-safe-area-bottom">
<ion-toolbar>
<ion-buttons>
<ion-button fill="solid" color="warning">加入购物车</ion-button>
<ion-button fill="solid" color="danger">立即购买</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-footer>把上面任意一段复制到你的页面里，立刻就能拥有专业级的头部和底部效果！
想要我直接发你一个「带透明头部 + 固定底部购物车」的完整页面模板吗？30 秒就能跑起来。说一声就发～
