fix(h5): hide in-page nav titles that duplicate WeChat chrome
CI / verify (pull_request) Has been cancelled

Keep back buttons and header layout. mini-user only hides titles on H5; partner/shop hide .app-page-title and legal titles; shared PageHeader defaults showTitle=false.
This commit is contained in:
2026-07-16 08:05:44 +08:00
parent 7b14f4a0cc
commit 5a26841d3a
10 changed files with 66 additions and 16 deletions
+6 -2
View File
@@ -10,6 +10,8 @@ type PageNavBarProps = {
right?: ReactNode;
};
const isH5 = process.env.TARO_ENV === 'h5';
/** 内页自定义导航栏(返回 + 标题 + 右侧操作),适配刘海屏 */
export default function PageNavBar({
title,
@@ -19,16 +21,18 @@ export default function PageNavBar({
right,
}: PageNavBarProps) {
const metrics = useNavBarMetrics();
const showTitle = !isH5 && titleVisible;
return (
<View
className={`page-nav-bar${solid ? ' page-nav-bar--solid' : ''}`}
style={subPageNavBarStyle(metrics)}
aria-label={title}
>
<Text
className={`page-nav-bar__title${titleVisible ? ' page-nav-bar__title--visible' : ''}`}
className={`page-nav-bar__title${showTitle ? ' page-nav-bar__title--visible' : ''}`}
>
{title}
{showTitle ? title : ''}
</Text>
<View
className="page-nav-bar__content"
@@ -9,6 +9,8 @@ type SubPageHeaderProps = {
right?: ReactNode;
};
const isH5 = process.env.TARO_ENV === 'h5';
/** 子页面固定实底顶栏(确认订单 / 地址 / 支付 / 订单列表等) */
export default function SubPageHeader({ title, onBack, right }: SubPageHeaderProps) {
const metrics = useNavBarMetrics();
@@ -27,8 +29,8 @@ export default function SubPageHeader({ title, onBack, right }: SubPageHeaderPro
}
return (
<View className="sub-page-header" style={subPageNavBarStyle(metrics)}>
<Text className="sub-page-header__title">{title}</Text>
<View className="sub-page-header" style={subPageNavBarStyle(metrics)} aria-label={title}>
{!isH5 ? <Text className="sub-page-header__title">{title}</Text> : null}
<View
className="sub-page-header__content"
style={subPageNavContentStyle(metrics)}
@@ -7,13 +7,15 @@ type TabMainHeaderProps = {
extra?: ReactNode;
};
/** Tab 页顶栏:适配刘海屏 + 微信胶囊避让 */
const isH5 = process.env.TARO_ENV === 'h5';
/** Tab 页顶栏:适配刘海屏 + 微信胶囊避让;H5 不展示标题(与微信系统标题重复) */
export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
const metrics = useNavBarMetrics();
return (
<View className="tab-main-header" style={navBarStyle(metrics)}>
<Text className="tab-main-header__title">{title}</Text>
<View className="tab-main-header" style={navBarStyle(metrics)} aria-label={title}>
{!isH5 ? <Text className="tab-main-header__title">{title}</Text> : null}
<View
className="tab-main-header__content"
style={tabNavContentStyle(metrics)}