fix(navbar): 导航栏高度改由内容栏承担,修复状态栏 padding 挤压导致标题下坠与页面重叠

This commit is contained in:
ozh 2026-09-09 15:51:26 +08:00
parent e882d391f7
commit 1250a54076
2 changed files with 25 additions and 12 deletions

View File

@ -1,10 +1,18 @@
// 外层只负责状态栏留白与白底:高度不能写死——reset 的 border-box 下
// 固定 height 会把 paddingTop(状态栏 44px+)一起算进去,内容区被压成
// 0 甚至负值,标题被挤出导航栏(与页面内容重叠)
.navbar { .navbar {
position: relative;
background: #ffffff;
}
// 内容栏:88px(→rpx) = 44 逻辑 px,标准导航高度
.bar {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
height: 88px; height: 88px;
padding: 0 32px; padding: 0 32px;
background: #ffffff;
} }
.back { .back {
@ -27,17 +35,21 @@
margin-left: 8px; margin-left: 8px;
} }
// 绝对定位居中:与 back 按钮是否存在无关,免手动平衡宽度 // 绝对定位四边拉伸 + flex 居中:不依赖 absolute 静态位置(各内核行为不一),
// 外层必须是 View(block 元素):text 标签在 absolute 下宽度收缩、 // 与 back 按钮是否存在无关,免手动平衡宽度
// left+right 无法撑开宽度,text-align:center 会失效
.titleWrap { .titleWrap {
position: absolute; position: absolute;
left: 120px; left: 120px;
right: 120px; right: 120px;
text-align: center; top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
} }
.title { .title {
max-width: 100%;
font-size: 32px; font-size: 32px;
font-weight: 600; font-weight: 600;
color: $color-text; color: $color-text;

View File

@ -37,14 +37,15 @@ export function Navbar({
borderBottom: border ? '1px solid #f0f1f3' : 'none' borderBottom: border ? '1px solid #f0f1f3' : 'none'
}} }}
> >
{autoBack && ( <View className={styles.bar}>
<View className={styles.back} onClick={handleBack}> {autoBack && (
<View className={styles.backArrow} /> <View className={styles.back} onClick={handleBack}>
<View className={styles.backArrow} />
</View>
)}
<View className={styles.titleWrap}>
<Text className={styles.title}>{title}</Text>
</View> </View>
)}
{/* title 用 View 包裹:text 标签 absolute 定位下宽度收缩导致居中失效 */}
<View className={styles.titleWrap}>
<Text className={styles.title}>{title}</Text>
</View> </View>
</View> </View>
) )