fix(h5): hide in-page nav titles that duplicate WeChat chrome
CI / verify (pull_request) Has been cancelled
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:
@@ -3065,3 +3065,11 @@ body {
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed rgba(166, 29, 36, 0.15);
|
||||
}
|
||||
|
||||
/* 微信 H5 系统标题已展示:隐藏页内重复标题,保留返回键与顶栏布局 */
|
||||
.app-page-title {
|
||||
visibility: hidden;
|
||||
font-size: 0 !important;
|
||||
line-height: 0 !important;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
@@ -35,8 +35,11 @@
|
||||
|
||||
.legal-h5-title {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
/* 与微信系统标题重复,仅保留顶栏高度与返回 */
|
||||
visibility: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.legal-h5-body {
|
||||
|
||||
@@ -2702,3 +2702,11 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 微信 H5 系统标题已展示:隐藏页内重复标题,保留返回键与顶栏布局 */
|
||||
.app-page-title {
|
||||
visibility: hidden;
|
||||
font-size: 0 !important;
|
||||
line-height: 0 !important;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -35,8 +35,11 @@
|
||||
|
||||
.legal-h5-title {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
/* 与微信系统标题重复,仅保留顶栏高度与返回 */
|
||||
visibility: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.legal-h5-body {
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -63,8 +63,10 @@ export default function BenefitPage() {
|
||||
|
||||
return (
|
||||
<PageShell variant="tab" className="benefit-page">
|
||||
<View className="benefit-header" style={navBarStyle(metrics)}>
|
||||
<Text className="benefit-header-title">好客权益</Text>
|
||||
<View className="benefit-header" style={navBarStyle(metrics)} aria-label="好客权益">
|
||||
{process.env.TARO_ENV !== 'h5' ? (
|
||||
<Text className="benefit-header-title">好客权益</Text>
|
||||
) : null}
|
||||
<View
|
||||
className="benefit-header__content"
|
||||
style={tabNavContentStyle(metrics)}
|
||||
|
||||
Reference in New Issue
Block a user