uniapp自定义导航栏

曼妙佳人

去掉导航栏打开pages.json配置文件，找到自定义导航栏的页面，在页面的style里面设置导航栏样式navigationStyle属性。

"navigationStyle":"custom"

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

第一种常见情况

1. <view class="status_bar">
   
2.     <!-- 状态栏 -->
   
3. </view>
   
4. <view> 导航栏</view>
   
5. .status_bar {
   
6.      height: var(--status-bar-height);
   
7.      width: 100%;
   
8. }

复制代码

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

1. <view class="status-contents">  
   
2.      <view class="status top-view"></view>  
   
3.     <view class="title" style="height: 88px;">
   
4.         <text>我是导航栏啊</text>
   
5.     </view>
   
6. </view>
   
7.       .status-contents{  
   
8.            height: calc(var(--status-bar-height) + 88px);  
   
9.        }  
   
10.     .top-view{  
    
11.           width: 100%;  
    
12.           position: fixed;  
    
13.           top:0;  
    
14.     }  
    
15.     .status{  
    
16.           height:var(--status-bar-height);  
    
17.     }
    
18.     .title{
    
19.          width: 100%;  
    
20.          position: fixed;  
    
21.          top: var(--status-bar-height);  
    
22.     }

复制代码

yinghao2005

感谢分享一起学习