uniapp【修复】:修复同步导行栏高度

This commit is contained in:
21世纪小八路
2024-10-22 00:27:17 +08:00
parent 5d4fee524a
commit 5a83563b1f
7 changed files with 15 additions and 9 deletions

View File

@@ -1,5 +1,5 @@
<template>
<uv-navbar :bgColor="props.bgColor">
<uv-navbar :bgColor="props.bgColor" placeholder :height="menuButtonHeight+'px'">
<template #left>
<view class="page-back">
<image v-if="props.isBack" @click="hanlderBack" class="back"
@@ -15,7 +15,9 @@
</template>
<script setup lang="ts">
import { useSystemInfo } from '@/core/hooks';
import { handleStaticResources } from '@/core/utils';
const { menuButtonHeight } = useSystemInfo();
const props = withDefaults(defineProps<{
isBack : boolean,

View File

@@ -3,7 +3,7 @@
<coreshop-navbar :isBack="props.isBack" :bgColor="props.bgColor" :mode="props.mode" :title="props.title"
:titleColor="props.titleColor" :handleCustomRouteJump="props.handleCustomRouteJump"></coreshop-navbar>
<view class="layout-page-content"
:style="{ 'padding-top': `${props.isShowStatusBarHeight ? statusBarHeight : 0}px`, ...props.contentStyle }">
:style="{ ...props.contentStyle }">
<slot></slot>
</view>
<template v-if="props.showLoginModalDom">

View File

@@ -30,7 +30,7 @@
skeletonLoading : boolean;
}>(), {
isBack: true,
bgColor: '#EEF3F7',
bgColor: '#D33123',
titleColor: '#000',
mode: 'center',
title: '',

View File

@@ -4,16 +4,20 @@ export const useSystemInfo = () => {
const state = reactive<{
systemInfo : any;
statusBarHeight : number;
menuButtonHeight : number;
}>({
systemInfo: {},
statusBarHeight: 0,
menuButtonHeight: 44
});
onMounted(async () => {
const menuButton = uni.getMenuButtonBoundingClientRect();
const systemInfo = await uni.getSystemInfo();
state.systemInfo = systemInfo;
state.statusBarHeight = systemInfo.statusBarHeight + systemInfo.safeArea.top;
state.menuButtonHeight = menuButton.height + (menuButton.top - systemInfo.statusBarHeight) * 2;
state.statusBarHeight = systemInfo.statusBarHeight + state.menuButtonHeight;
})
return toRefs(state);

View File

@@ -10,7 +10,7 @@
</template>
</uv-navbar>
<view class="content-box p-25" :style="{ 'padding-top': `${statusBarHeight + 10}px` }">
<view class="content-box p-25">
<CustomPage ref="homePage" :coreshopData="state.coreshopData"></CustomPage>
</view>

View File

@@ -11,7 +11,6 @@
.content-box {
position: relative;
margin: 25rpx;
padding-top: 200rpx;
.title-box {
display: flex;

View File

@@ -1,3 +1,6 @@
.layout-seckill-box{
padding-top: 80rpx;
}
.navbar-box {
position: fixed;
left: 0;
@@ -31,8 +34,6 @@
}
.seckill-box {
padding-top: 100rpx;
.card-box {
margin-bottom: 35rpx;
margin: 25rpx;