uniapp一个透明占位的nav-bar组件

该组件是一个透明占位的头部nav-bar组件，组件的大小位于最顶部一直到胶囊底部的位置，如下：

内部提供一个插槽，这个插槽的高度跟胶囊的高度一致，你可以自定义一些按钮，跟胶囊对齐

<template>
    <view
        :style="{
            height: navBar.totalHeight + 'px',
            background: 'transparent',
            position: 'relative',
            display: 'flex',
            alignItems: 'flex-end',
        }"
    >
    <view :style="{
        width: '100%',
        height: navBar.menuHeight + 'px'
    }">
            <slot></slot>
    </view>

    </view>
</template>

<script setup>
import { reactive, ref } from 'vue';

// 导航栏信息
const navBar = reactive({
    statusBarHeight: 0, //状态栏的高度
    navigatorHeight: 0, //导航栏高度
    menuHeight: 0, //胶囊高度
    menuTop: 0, //胶囊与顶部的距离
    totalHeight: 0 //总高度
});
// 胶囊信息
const menu = ref();
// 系统信息
const system = ref();
const getNavBarInfo = () => {
    //获取系统信息
    uni.getSystemInfo({
        success: (res) => (system.value = res)
    });

    //获取胶囊信息
    try {
        menu.value = uni.getMenuButtonBoundingClientRect();
    } catch {
        menu.value = {
            height: 0,
            top: 0
        };
    }

    //计算组件高度
    navBar.statusBarHeight = system.value.statusBarHeight; //状态栏高度
    navBar.menuHeight = menu.value.height; //胶囊高度
    navBar.menuTop = menu.value.top; //胶囊与顶部的距离
    //导航栏高度= （胶囊顶部距离-状态栏高度） x 2 + 胶囊的高度
    // 这里用 x 1就是底部跟胶囊底部对齐，如果 x 2则是胶囊底部还留有一个边距的位置
    navBar.navigatorHeight = (menu.value.top - system.value.statusBarHeight) * 1 + menu.value.height;
    //总高度 = 状态栏的高度 + 导航栏高度
    navBar.totalHeight = navBar.statusBarHeight + navBar.navigatorHeight;
};
getNavBarInfo();
</script>

<style></style>

页面使用：
将NavNone组件引入到页面中

<NavNone>
        <view>你的自定义内容...</view>
</NavNone>