uniapp自定义导航栏

陆先森

这里说的导航栏解决的问题是手机顶部状态栏区域不被页面内容覆盖。uniapp项目，小程序都可以使用官方给的默认导航栏，处理了手机状态栏的问题。以及还有第三方的框架也做了处理。但实际开发中，默认的或者第三方给的设计也不能完全满足业务的需求，所以最好的方式就是自己写导航栏，想怎么改就怎么改。
非H5端，手机顶部的状态栏会被页面内容所覆盖，当然如果做像某音那样的短视频，则不用考虑状态栏的问题，窗体是沉浸式的。uniapp官方给了处理的方案，即css变量，--status-bar-height，小程序这个值是25px，app则根据实际情况去变化。
参考代码如下：

<view class="status_bar">
           <!-- 状态栏 -->
</view>
<view> 导航栏</view>
.status_bar {
       height: var(--status-bar-height);
       width: 100%;
   }

如果需要对导航栏定位，则这样处理

<view class="status-contents">  
     <view class="status top-view"></view>  
    <view class="title" style="height: 88px;">
        <text>我是导航栏啊</text>
    </view>
</view>
      .status-contents{  
           height: calc(var(--status-bar-height) + 88px);  
       }  
    .top-view{  
          width: 100%;  
          position: fixed;  
          top:0;  
    }  
    .status{  
          height:var(--status-bar-height);  
    }
    .title{
         width: 100%;  
         position: fixed;  
         top: var(--status-bar-height);  
    }

Tip: 要去掉默认的导航栏，即设置navigationStyle为custom；