novelAD/pages/bookMall/index.vue

<template>
    <view class="container">
        <view class="navBarBox">
            <!-- 状态栏占位 -->
            <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
            <!-- 真正的导航栏内容 -->
            <view class="navBar">
                小说书城
            </view>
        </view>


    </view>
    <!-- 引入自定义 TabBar -->
    <custom-tabbar :currentIndex='1' />
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import CustomTabbar from "@/components/custom-tabbar.vue";

// 状态栏高度
let statusBarHeight = ref(0);
// 导航栏高度
let navBarHeight = ref(0);
onBeforeMount(() => {
    statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];
    const custom = uni.getMenuButtonBoundingClientRect();
    // 导航栏的高度 = 胶囊的高度 + （胶囊距离顶部的距离 - 状态栏的高度）* 2
    //                                   即胶囊的上下边距
    navBarHeight.value = custom.height + (custom.top - statusBarHeight.value) * 2;
});



</script>

<style lang="scss" scoped>
.container {
    .navBarBox {
        .navBar {
            width: 100%;
            height: 80rpx !important;
            line-height: 80rpx;
            padding-left: 30rpx;
            font-size: 32rpx;
            color: #333;
        }
    }  
}
</style>