uni-app导航栏配置

痛定思痛。 2023-07-12 14:50 13阅读 0赞

uni-app写app的内容会与沉浸栏重合在一起，写好好多，都是有点问题的，这次终于找到解决的方法了，与大家分享一下

最简单的解决方式就是配置mainfest.json来关闭沉浸式。即通过打开应用的manifest.json文件，切换到代码视图，在app-plus -> statusbar 下添加immersed节点并设置值为false。

"app-plus" : { 
        "statusbar": {   
            "immersed": false  
        },
    }

App因为默认为沉浸式，去除导航栏后，页面顶部会直通到状态栏的区域，可能出现如下需求：

改变状态栏文字颜色：设置该页面的 navigationBarTextStyle 属性，可取值为 black/white。如果想单独设置颜色，App端可使用plus.navigator.setStatusBarStyle设置。部分低端Android手机  
自身不支持设置状态栏前景色。  
改变状态栏背景颜色：通过绘制一个占位的view固定放在状态栏位置，设置此view的背景颜色，即可达到想要的效果，uni-app提供了一个状态栏高度的css变量，具体参考：uni-app内置的CSS变量。

<template>
        <view>
             
            <view class="status_bar"> 
                <view class="top_view"></view> 
            </view> 
            
            <view> 
                 
            </view>
        </view>
    </template>
     
    <script> export default { data() { return { } }, methods: { } } </script>
     
    <style> .status_bar { height: var(--status-bar-height); width: 100%; background-color: #F8F8F8; } .top_view { height: var(--status-bar-height); width: 100%; position: fixed; background-color: #F8F8F8; top: 0; z-index: 999; } </style>

var(–status-bar-height) 此变量在微信小程序环境为固定 25px，在 5+App 里为手机实际状态栏高度。  
当设置 “navigationStyle”:“custom” 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(–status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。（实战过程中此方案仍不能解决页面内容出现在状态栏的问题）  
设置css变量后解决页面顶部会直通到状态栏的区域的问题：设置了css变量后，手机顶部状态栏区域还是会被页面内容覆盖，可使用plus.navigator.getStatusbarHeight();动态计算系统状态栏的高度barHeight，然后设置页面主view的样式:style="\{‘margin-top’:barHeight+‘px’\}"，来解决。

<template>
        <view class="uni-flex uni-column" style="height: 100%;">
              
            <view class="status_bar">  
                <view class="top_view"></view> 
            </view>  
             
            
            <view class="uni-flex uni-row jk-bg-blue uni-center" style="height: 12%;" :style="{ 'margin-top':barHeight+'px'}">
                <view class="flex-sub jk-header uni-flex uni-column justify-start" @tap="test1">
                    <text class="text-white cuIcon-scan"></text>
                    <text>扫码</text>
                </view>
                <view class="flex-treble jk-header uni-flex uni-column justify-center" @tap="test2">
                    <text class="text-white cuIcon-rank"></text>
                    <text>统计</text>
                </view>
                <view class="flex-sub jk-header uni-flex uni-column justify-end" @click="test3">
                    <text class="text-white cuIcon-exit"></text>
                    <text>退出</text>
                </view>
            </view>
            
            <view class="uni-flex align-center uni-row margin-xs" style="height: 78%;">
        
            </view>
    
            <view class="uni-flex uni-row uni-center" style="height: 10%;color: #000000;background-color: F8F8F8;border-top: 3px solid #eee;">
    
            </view>
                    
        </view>
    </template>
    
    <script> var _self; export default { components: { uniPopup, }, data() { return { barHeight:25, } }, methods: { //获取系统状态栏高度 getSystemStatusBarHeight:function(){ // #ifdef APP-PLUS var height = plus.navigator.getStatusbarHeight(); _self.barHeight = height; // #endif // #ifdef H5 _self.barHeight = 0; // #endif }, }, onLoad:function(){ _self = this; _self.getSystemStatusBarHeight(); } } </script>
    <style> </style>

# 直接修改状态栏颜色（全局）的方式 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]  
在pages.json中写默认的状态栏配置，我是自定义的顶部栏，所以主要看更改状态栏的颜色即可

{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "首页",
    				"app-plus":{
    					"titleNView":false    //去掉当前页的顶部导航栏
    				},
    				"navigationBarBackgroundColor":"#FE5786",
    				"navigationBarTextStyle":"white"  //状态栏字体颜色
    			}
    		},

动态修改状态栏颜色，style可设置为dark和light ，字符串类型

void plus.navigator.setStatusBarStyle(style);
     
    void plus.navigator.setStatusBarStyle("dark"); //黑色
     
    void plus.navigator.setStatusBarStyle("light");//白色

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200309143619498.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200309143723885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s,size_16,color_FFFFFF,t_70