該組件是一個透明佔位的頭部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>