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

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

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

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(手机预览没有问题)

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