当需要对导航栏做某些特定的操作，原生导航栏不能满足需求时，可使用自定义导航栏

取消原生导航栏

在pages.json文件中将要修改的页面，style中的“navigationStyle”设置为custom，取消默认的原生导航栏

{
            "path" : "pages/index1/index1",
            "style" :                                                                                    
            {
                "navigationStyle": "custom",
                "navigationBarTitleText": "页面1"
            }

 }

非H5端，手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因，即全屏可写内容。

此时可以使用状态栏高度的css变量--status-bar-height，写一个占位div，把状态栏的位置从前景部分让出来，高度设为css变量。

<template>
    <view>
        <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
        <view> 状态栏下的文字 </view>
    </view>
</template>
<style>
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
        background-color： #fff; //设置背景色
    }
</style>

可设置背景色，否则若是整个页面设置为灰色，此时状态栏部分颜色看起来会很突兀。

可以在页面最外层dom元素设置padding-top，值为状态栏高度，此时可以显示状态栏，但是没有设置背景色，会出现上述问题。