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;
|
padding-top: 12px;
|
||||||
border-top: 1px dashed rgba(166, 29, 36, 0.15);
|
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 {
|
.legal-h5-title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 17px;
|
/* 与微信系统标题重复,仅保留顶栏高度与返回 */
|
||||||
font-weight: 600;
|
visibility: hidden;
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legal-h5-body {
|
.legal-h5-body {
|
||||||
|
|||||||
@@ -2702,3 +2702,11 @@
|
|||||||
cursor: pointer;
|
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 {
|
.legal-h5-title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 17px;
|
/* 与微信系统标题重复,仅保留顶栏高度与返回 */
|
||||||
font-weight: 600;
|
visibility: hidden;
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legal-h5-body {
|
.legal-h5-body {
|
||||||
|
|||||||
@@ -10,6 +10,8 @@ type PageNavBarProps = {
|
|||||||
right?: ReactNode;
|
right?: ReactNode;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const isH5 = process.env.TARO_ENV === 'h5';
|
||||||
|
|
||||||
/** 内页自定义导航栏(返回 + 标题 + 右侧操作),适配刘海屏 */
|
/** 内页自定义导航栏(返回 + 标题 + 右侧操作),适配刘海屏 */
|
||||||
export default function PageNavBar({
|
export default function PageNavBar({
|
||||||
title,
|
title,
|
||||||
@@ -19,16 +21,18 @@ export default function PageNavBar({
|
|||||||
right,
|
right,
|
||||||
}: PageNavBarProps) {
|
}: PageNavBarProps) {
|
||||||
const metrics = useNavBarMetrics();
|
const metrics = useNavBarMetrics();
|
||||||
|
const showTitle = !isH5 && titleVisible;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
className={`page-nav-bar${solid ? ' page-nav-bar--solid' : ''}`}
|
className={`page-nav-bar${solid ? ' page-nav-bar--solid' : ''}`}
|
||||||
style={subPageNavBarStyle(metrics)}
|
style={subPageNavBarStyle(metrics)}
|
||||||
|
aria-label={title}
|
||||||
>
|
>
|
||||||
<Text
|
<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>
|
</Text>
|
||||||
<View
|
<View
|
||||||
className="page-nav-bar__content"
|
className="page-nav-bar__content"
|
||||||
|
|||||||
@@ -9,6 +9,8 @@ type SubPageHeaderProps = {
|
|||||||
right?: ReactNode;
|
right?: ReactNode;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const isH5 = process.env.TARO_ENV === 'h5';
|
||||||
|
|
||||||
/** 子页面固定实底顶栏(确认订单 / 地址 / 支付 / 订单列表等) */
|
/** 子页面固定实底顶栏(确认订单 / 地址 / 支付 / 订单列表等) */
|
||||||
export default function SubPageHeader({ title, onBack, right }: SubPageHeaderProps) {
|
export default function SubPageHeader({ title, onBack, right }: SubPageHeaderProps) {
|
||||||
const metrics = useNavBarMetrics();
|
const metrics = useNavBarMetrics();
|
||||||
@@ -27,8 +29,8 @@ export default function SubPageHeader({ title, onBack, right }: SubPageHeaderPro
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className="sub-page-header" style={subPageNavBarStyle(metrics)}>
|
<View className="sub-page-header" style={subPageNavBarStyle(metrics)} aria-label={title}>
|
||||||
<Text className="sub-page-header__title">{title}</Text>
|
{!isH5 ? <Text className="sub-page-header__title">{title}</Text> : null}
|
||||||
<View
|
<View
|
||||||
className="sub-page-header__content"
|
className="sub-page-header__content"
|
||||||
style={subPageNavContentStyle(metrics)}
|
style={subPageNavContentStyle(metrics)}
|
||||||
|
|||||||
@@ -7,13 +7,15 @@ type TabMainHeaderProps = {
|
|||||||
extra?: ReactNode;
|
extra?: ReactNode;
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Tab 页顶栏:适配刘海屏 + 微信胶囊避让 */
|
const isH5 = process.env.TARO_ENV === 'h5';
|
||||||
|
|
||||||
|
/** Tab 页顶栏:适配刘海屏 + 微信胶囊避让;H5 不展示标题(与微信系统标题重复) */
|
||||||
export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
|
export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
|
||||||
const metrics = useNavBarMetrics();
|
const metrics = useNavBarMetrics();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className="tab-main-header" style={navBarStyle(metrics)}>
|
<View className="tab-main-header" style={navBarStyle(metrics)} aria-label={title}>
|
||||||
<Text className="tab-main-header__title">{title}</Text>
|
{!isH5 ? <Text className="tab-main-header__title">{title}</Text> : null}
|
||||||
<View
|
<View
|
||||||
className="tab-main-header__content"
|
className="tab-main-header__content"
|
||||||
style={tabNavContentStyle(metrics)}
|
style={tabNavContentStyle(metrics)}
|
||||||
|
|||||||
@@ -63,8 +63,10 @@ export default function BenefitPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<PageShell variant="tab" className="benefit-page">
|
<PageShell variant="tab" className="benefit-page">
|
||||||
<View className="benefit-header" style={navBarStyle(metrics)}>
|
<View className="benefit-header" style={navBarStyle(metrics)} aria-label="好客权益">
|
||||||
|
{process.env.TARO_ENV !== 'h5' ? (
|
||||||
<Text className="benefit-header-title">好客权益</Text>
|
<Text className="benefit-header-title">好客权益</Text>
|
||||||
|
) : null}
|
||||||
<View
|
<View
|
||||||
className="benefit-header__content"
|
className="benefit-header__content"
|
||||||
style={tabNavContentStyle(metrics)}
|
style={tabNavContentStyle(metrics)}
|
||||||
|
|||||||
@@ -3,11 +3,19 @@ type PageHeaderProps = {
|
|||||||
onBack?: () => void;
|
onBack?: () => void;
|
||||||
backLabel?: string;
|
backLabel?: string;
|
||||||
right?: React.ReactNode;
|
right?: React.ReactNode;
|
||||||
|
/** 是否展示居中标题;H5 微信内默认隐藏,避免与系统标题栏重复 */
|
||||||
|
showTitle?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function PageHeader({ title, onBack, backLabel = '←', right }: PageHeaderProps) {
|
export default function PageHeader({
|
||||||
|
title,
|
||||||
|
onBack,
|
||||||
|
backLabel = '←',
|
||||||
|
right,
|
||||||
|
showTitle = false,
|
||||||
|
}: PageHeaderProps) {
|
||||||
return (
|
return (
|
||||||
<header className="page-header">
|
<header className="page-header" aria-label={title}>
|
||||||
<div className="page-header-side">
|
<div className="page-header-side">
|
||||||
{onBack ? (
|
{onBack ? (
|
||||||
<button type="button" className="back-btn" onClick={onBack} aria-label="返回">
|
<button type="button" className="back-btn" onClick={onBack} aria-label="返回">
|
||||||
@@ -17,7 +25,11 @@ export default function PageHeader({ title, onBack, backLabel = '←', right }:
|
|||||||
<span className="page-header-spacer" />
|
<span className="page-header-spacer" />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{showTitle ? (
|
||||||
<div className="app-page-title page-header-title">{title}</div>
|
<div className="app-page-title page-header-title">{title}</div>
|
||||||
|
) : (
|
||||||
|
<div className="page-header-title page-header-title--spacer" aria-hidden="true" />
|
||||||
|
)}
|
||||||
<div className="page-header-side page-header-side--right">{right ?? <span className="page-header-spacer" />}</div>
|
<div className="page-header-side page-header-side--right">{right ?? <span className="page-header-spacer" />}</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -531,6 +531,12 @@ button, input, select, textarea { font: inherit; }
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-header-title--spacer {
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
min-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Coupon badge (ticket notch) */
|
/* Coupon badge (ticket notch) */
|
||||||
.coupon-badge {
|
.coupon-badge {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
Reference in New Issue
Block a user