uni-app去掉原生的导航栏,自定义导航栏样式?

1.在pages.json里选择需要去掉原生导航栏的页面,更改属性navigationStyle图下:

2.在template模板中写导航

<template>
    <view class="content">
        <view class="head" :style="{'height':dom.height+'px','padding-top':dom.top+'px'}">
            <view class="er" :style="{'height':dom.height+'px'}">222</view>
            
        </view>
    </view>
</template>

3.对应的css样式

.er{
        background-color: red;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
    }
.head{
    background-color: #007AFF;
    width: 100%;
    padding-bottom: 20rpx;
    }

4.在created写下如下代码

created(){
    let dom = uni.getMenuButtonBoundingClientRect()//获取微信小程序胶囊按钮的信息对象
    this.dom=dom
    let t=this
    uni.getSystemInfo({
    success:function(obj){
    console.log(obj.statusBarHeight)//手机状态栏高度
        t.p=obj.statusBarHeight
                }
            })
             
        }

5.效果预览