页面顶部空白调整
This commit is contained in:
@@ -7,25 +7,24 @@ type TabMainHeaderProps = {
|
|||||||
extra?: ReactNode;
|
extra?: ReactNode;
|
||||||
};
|
};
|
||||||
|
|
||||||
const isH5 = process.env.TARO_ENV === 'h5';
|
/**
|
||||||
|
* Tab 页顶栏:仅在有右侧扩展内容时渲染。
|
||||||
/** Tab 页顶栏:适配刘海屏 + 微信胶囊避让;H5 不展示标题(与微信系统标题重复) */
|
* 小程序 / H5 标题走系统导航栏,避免自定义顶栏造成顶部留白。
|
||||||
|
*/
|
||||||
export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
|
export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
|
||||||
const metrics = useNavBarMetrics();
|
const metrics = useNavBarMetrics();
|
||||||
|
|
||||||
// H5:系统标题已展示;无右侧内容时整栏不渲染,避免顶部留白
|
if (!extra) {
|
||||||
if (isH5 && !extra) {
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className="tab-main-header" style={navBarStyle(metrics)} aria-label={title}>
|
<View className="tab-main-header" style={navBarStyle(metrics)} aria-label={title}>
|
||||||
{!isH5 ? <Text className="tab-main-header__title">{title}</Text> : null}
|
{process.env.TARO_ENV !== 'h5' ? (
|
||||||
<View
|
<Text className="tab-main-header__title">{title}</Text>
|
||||||
className="tab-main-header__content"
|
) : null}
|
||||||
style={tabNavContentStyle(metrics)}
|
<View className="tab-main-header__content" style={tabNavContentStyle(metrics)}>
|
||||||
>
|
<View className="tab-main-header__extra">{extra}</View>
|
||||||
{extra ? <View className="tab-main-header__extra">{extra}</View> : null}
|
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
export default definePageConfig({
|
export default definePageConfig({
|
||||||
navigationStyle: 'custom',
|
|
||||||
navigationBarTitleText: '杜康好客',
|
navigationBarTitleText: '杜康好客',
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -65,10 +65,7 @@ export default function HomePage() {
|
|||||||
const onSale = tab === 'QINGXIANG';
|
const onSale = tab === 'QINGXIANG';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageShell
|
<PageShell variant="tab" className="home-page no-tab-header">
|
||||||
variant="tab"
|
|
||||||
className={`home-page${process.env.TARO_ENV === 'h5' ? ' h5-no-tab-header' : ''}`}
|
|
||||||
>
|
|
||||||
<TabMainHeader title="杜康好客" />
|
<TabMainHeader title="杜康好客" />
|
||||||
|
|
||||||
<View className="home-aroma-nav">
|
<View className="home-aroma-nav">
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
export default definePageConfig({
|
export default definePageConfig({
|
||||||
navigationStyle: 'custom',
|
|
||||||
navigationBarTitleText: '我的',
|
navigationBarTitleText: '我的',
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -210,10 +210,7 @@ export default function MinePage() {
|
|||||||
|
|
||||||
if (!authed) {
|
if (!authed) {
|
||||||
return (
|
return (
|
||||||
<PageShell
|
<PageShell variant="tab" className="mine-page no-tab-header">
|
||||||
variant="tab"
|
|
||||||
className={`mine-page${process.env.TARO_ENV === 'h5' ? ' h5-no-tab-header' : ''}`}
|
|
||||||
>
|
|
||||||
<TabMainHeader title="我的" />
|
<TabMainHeader title="我的" />
|
||||||
<View className="mine-header">
|
<View className="mine-header">
|
||||||
<View className="mine-header-texture" />
|
<View className="mine-header-texture" />
|
||||||
@@ -250,10 +247,7 @@ export default function MinePage() {
|
|||||||
const memberLabel = hasWechat ? '好客会员' : canWxBind ? '微信未授权' : '未授权微信';
|
const memberLabel = hasWechat ? '好客会员' : canWxBind ? '微信未授权' : '未授权微信';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageShell
|
<PageShell variant="tab" className="mine-page no-tab-header">
|
||||||
variant="tab"
|
|
||||||
className={`mine-page${process.env.TARO_ENV === 'h5' ? ' h5-no-tab-header' : ''}`}
|
|
||||||
>
|
|
||||||
<TabMainHeader title="我的" />
|
<TabMainHeader title="我的" />
|
||||||
<View className="mine-header">
|
<View className="mine-header">
|
||||||
<View className="mine-header-texture" />
|
<View className="mine-header-texture" />
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
export default definePageConfig({
|
export default definePageConfig({
|
||||||
navigationStyle: 'custom',
|
|
||||||
navigationBarTitleText: '门店',
|
navigationBarTitleText: '门店',
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -73,10 +73,7 @@ export default function StoresPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageShell
|
<PageShell variant="tab" className="store-page no-tab-header">
|
||||||
variant="tab"
|
|
||||||
className={`store-page${process.env.TARO_ENV === 'h5' ? ' h5-no-tab-header' : ''}`}
|
|
||||||
>
|
|
||||||
<TabMainHeader title="门店" />
|
<TabMainHeader title="门店" />
|
||||||
<View className="store-toolbar">
|
<View className="store-toolbar">
|
||||||
<View className="store-location" onClick={() => setRegionOpen(true)}>
|
<View className="store-location" onClick={() => setRegionOpen(true)}>
|
||||||
|
|||||||
@@ -20,11 +20,15 @@
|
|||||||
padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
|
padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* H5 无 Tab 顶栏:贴顶,去掉标题栏留白 */
|
/* 无自定义 Tab 顶栏:贴顶(标题走小程序/H5 系统导航栏) */
|
||||||
|
.page-shell.no-tab-header,
|
||||||
.page-shell.h5-no-tab-header {
|
.page-shell.h5-no-tab-header {
|
||||||
--nav-bar-height: 0px;
|
--nav-bar-height: 0px;
|
||||||
|
--nav-status-bar-height: 0px;
|
||||||
|
--nav-content-height: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-shell.no-tab-header .home-aroma-nav,
|
||||||
.page-shell.h5-no-tab-header .home-aroma-nav {
|
.page-shell.h5-no-tab-header .home-aroma-nav {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user