uniapp自定义导航栏怎么空出状态栏的高度

1）固定的状态栏高度，此时iphonex等手机不建议使用

<template>
    <view>
        <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
        <view> 状态栏下的文字 </view>
    </view>
</template>    
<style>
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
        background: red;
    }
</style>

2)自定义写法，根据对应机型自行调整，所有机型都可使用

<template>
    <view>
        <!-- 假设我需要状态栏到文字内容部分还有50px的距离 -->
        <view class="status_bar" :style="{height:height+50+'px'}">
            <text>list</text>
        </view>
        <view> 状态栏下的文字 </view>
    </view>
</template>  

<script>
    export default{
        data(){
            return {
                height:null,//获取的状态栏高度
            }
        },
        onLoad(){
            var _this=this;
            // 获取手机状态栏高度
            uni.getSystemInfo({
                success:function(data){
                    // 将其赋值给this
                    _this.height=data.statusBarHeight;
                }
            })
        },
    }
</script>

<style>
    .status_bar {
        width: 100%;
        background: #007AFF;
        position: relative;
    }
    /* 调整状态栏标题的位置 */
    text{
        position: absolute;
        margin: auto;
        bottom:10px;
        left:0;
        right:0;
        text-align: center;
    }
</style>

本文转载于Alex-Song，看详细点击