fix(navbar): 导航栏高度改由内容栏承担,修复状态栏 padding 挤压导致标题下坠与页面重叠
This commit is contained in:
parent
e882d391f7
commit
1250a54076
|
|
@ -1,10 +1,18 @@
|
|||
// 外层只负责状态栏留白与白底:高度不能写死——reset 的 border-box 下
|
||||
// 固定 height 会把 paddingTop(状态栏 44px+)一起算进去,内容区被压成
|
||||
// 0 甚至负值,标题被挤出导航栏(与页面内容重叠)
|
||||
.navbar {
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
// 内容栏:88px(→rpx) = 44 逻辑 px,标准导航高度
|
||||
.bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88px;
|
||||
padding: 0 32px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.back {
|
||||
|
|
@ -27,17 +35,21 @@
|
|||
margin-left: 8px;
|
||||
}
|
||||
|
||||
// 绝对定位居中:与 back 按钮是否存在无关,免手动平衡宽度
|
||||
// 外层必须是 View(block 元素):text 标签在 absolute 下宽度收缩、
|
||||
// left+right 无法撑开宽度,text-align:center 会失效
|
||||
// 绝对定位四边拉伸 + flex 居中:不依赖 absolute 静态位置(各内核行为不一),
|
||||
// 与 back 按钮是否存在无关,免手动平衡宽度
|
||||
.titleWrap {
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
right: 120px;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
max-width: 100%;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: $color-text;
|
||||
|
|
|
|||
|
|
@ -37,15 +37,16 @@ export function Navbar({
|
|||
borderBottom: border ? '1px solid #f0f1f3' : 'none'
|
||||
}}
|
||||
>
|
||||
<View className={styles.bar}>
|
||||
{autoBack && (
|
||||
<View className={styles.back} onClick={handleBack}>
|
||||
<View className={styles.backArrow} />
|
||||
</View>
|
||||
)}
|
||||
{/* title 用 View 包裹:text 标签 absolute 定位下宽度收缩导致居中失效 */}
|
||||
<View className={styles.titleWrap}>
|
||||
<Text className={styles.title}>{title}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue