uni-app---自定义导航栏-对齐微信小程序胶囊

<template>
    <view class="status_bar" :style="{ paddingTop:statusBarHeight+'px' }"></view>
    <view class="navigation-custom flex-center" :style="{ height:nBarHeight+'px' }">
        <view class="left-icon flex-center flex1">
            <uv-icon v-if="showBack" @click="back" name="arrow-left" :color="fontColor" size="28rpx"></uv-icon>
        </view>
        <view class="center-title flex-center" style="flex: 4">{{ title || defaultTitle }}</view>
        <view class="right-solt flex-center flex1"></view>
    </view>
</template>
<script setup>
    import { getCurrentInstance ,onMounted,ref} from 'vue';
    const proxy = getCurrentInstance().proxy;
    const defaultTitle = proxy.$constant.TITLE;
    const emit = defineEmits(['back']);
    const props = defineProps({
        title: {
            type: String,
            default: '',
        },
        fontColor: {
            type: String,
            default: '#ffffff',
        },
        showBack: {
            type: Boolean,
            default: false,
        },
    });
	const statusBarHeight=ref(25)
	const nBarHeight=ref(50)
    onMounted(() => {
       let sBarHeight = uni.getWindowInfo()['statusBarHeight'];
		statusBarHeight.value = sBarHeight;
        // #ifdef MP-WEIXIN
        // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
        const custom = wx.getMenuButtonBoundingClientRect();
        console.log(custom);

        // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
        let navBarHeight = custom.height + (custom.top - sBarHeight) * 2;
        console.log('导航栏高度：' + navBarHeight);
		nBarHeight.value = navBarHeight;
    });
    const back = () => {
        emit('back');
    };
</script>

<style lang="scss">
    .status_bar {
        width: 100vw;
    }
	
    .navigation-custom {
		width: 100vw;
		&>view{
			height: 100%;
		}
        .center-title {
            text-align: center;
            color: v-bind(fontColor);
        }
    }
    .flex{
	display: flex;
}
.flex1{
	flex: 1;
}
.jus-center{
	justify-content: center;
}
.jus-bet{
	justify-content: space-between;
}
.al-center{
	align-items: center;
}
.flex-center{
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>