uniapp小程序获取状态栏高度和自定义导航栏

作者: 我是七月 | 来源:发表于2022-05-27 15:46 被阅读0次

<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);
        }
    })
}