uniapp中小程序状态栏与自定义导航栏

<template>
    <view class="container">
        <view class="statusbar" style="background-color: #18BC37;" >
            顶部
        </view>
        <view class="navbar" style="background-color: #ffaa00;" :style="{height: `${titleBarHeight}px`}">
            导航栏
        </view>
    </view>
</template>

1.采用uni-app提供的css --status-bar-height(会出现错位)

通过uni-app提供了状态栏高度的css变量[--status-bar-height]

<style>
    .container {
        font-size: 14px;
        line-height: 24px;
        background-color: #2979FF;
    }
    .statusbar {
         height: var(--status-bar-height);
    }
</style>

mounted() {
    let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
    uni.getSystemInfo({//获取系统信息
    success: res => {
        let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight)*2;//导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
        this.titleBarHeight = navHeight;
    },
    fail(err) {
        console.log(err);
    }
})}

该方法并不能解决，在小程序中出现了错位现象
微信开发者工具中情况

image.png

微信预览中情况

image.png

2.自己获取系统信息的statusBarHeight(手机预览没有问题)

<template>
    <view class="container">
        <view class="statusbar" style="background-color: #18BC37;" :style="{height: `${statusBarHeight}px`}">
            顶部
        </view>
        <view class="navbar" style="background-color: #ffaa00;" :style="{height: `${titleBarHeight}px`}">
            导航栏
        </view>
    </view>
</template>

mounted() {
    let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
    uni.getSystemInfo({//获取系统信息
        success: res => {
            let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight)*2;//导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
            this.titleBarHeight = navHeight;
            this.statusBarHeight = res.statusBarHeight
        },
        fail(err) {
            console.log(err);
        }
    })
}

微信开发者工具中情况

image.png
微信预览中情况
image.png