状态栏的高度 导航栏的高度 （顶部安全距离）

<template>
    <view>
        <view style="background-color: red" :style="{height:status_bar_height}"></view>
        <view style="background-color: green" :style="{height:nav_bar_height}"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                status_bar_height: '0px',
                nav_bar_height: '0px',
            }
        },
        mounted(){
            // #ifdef MP-WEIXIN
            this.getBarHeight()
            // #endif
        },
        methods: {
            getBarHeight() {
                uni.getSystemInfo({
                    success: (res) => {
                        // 获取手机顶部状态栏的高度
                        const statusBarHeight = res.statusBarHeight || 0;
            
                        let navBarHeight = 0;
                        // 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
                        if (uni.getMenuButtonBoundingClientRect) {
                            const menuButtonInfo = uni.getMenuButtonBoundingClientRect() || {};
                            navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
                            navBarHeight = navBarHeight || 0
                        }
            
                        console.log(statusBarHeight)
                        console.log(navBarHeight)
                        this.status_bar_height = statusBarHeight + 'px'
                        this.nav_bar_height = navBarHeight + 'px'
                    },
                    fail: (err) => {
                        console.error('获取系统信息失败:', err);
                    },
                });
            },
        }
    }
</script>

<style>

</style>