【自用整理】Uniapp导航栏&状态栏

导航栏

(1) 全局导航栏样式设置： 在pages.json的globalStyle里进行各个参数配置

"globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Hello uniapp",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "backgroundColorTop": "#F4F5F6",
    "backgroundColorBottom": "#F4F5F6",
    "mp-alipay": {
        "titleBarColor": "#FFFFFF"
    }
},

(2) 单页面导航栏样式设置：在每个page下面的style配置中添加navigationBar来配置各个参数

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",//设置页面标题文字
        "enablePullDownRefresh":true//开启下拉刷新
      }
    },
    ...
  ]
}

transparentTitle（透明）：always 一直透明 / auto 滑动自适应 / none 不透明【支付宝小程序、H5、APP】

titleImage（图片导航栏）：导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址【支付宝小程序、H5】

(3) 全局取消原生导航栏（小程序端胶囊仍存在）

"globalStyle": {
    "navigationStyle": "custom",
},

 

(4)单页面去除原生导航栏（小程序端胶囊仍存在）

·方法1 直接隐藏导航栏

{  
    "path" : "pages/index/index",  
    "style" : {  
        "navigationStyle":"custom"  
    }  
}  

·方法2 去除app端导航栏

原生导航栏在App侧的扩展

• 微信小程序的设计里，没有给原生导航提供太多自定义能力，在开发App时是不够用的。
• 在App下，每个page下面的style下面还有一个子扩展节点：app-plus（这个节点定义了在5+App环境下，也即iOS、Android环境下，增强的配置）。app-plus下可以设置titleNView等更多参数，可以得到比微信小程序更丰富的扩展性。另外，开发者也可以在必要时取消原生导航栏，使用view自行绘制导航栏。

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "主页",  
         // "navigationStyle":"custom",
        "app-plus":{
            "titleView":false  //不启用系统导航
        }
     }
}

 

状态栏

(1)解决去除原生导航栏之后页面通顶的问题

·方法1 在app-plus -> statusbar 下添加immersed节点并设为false

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

·方法2 顶部状态栏占位

当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，同时需使用plus.navigator.getStatusbarHeight()来动态计算系统状态栏的高度barHeight，然后设置页面主view的样式:style="{'margin-top':barHeight+'px'}"，来避免页面内容出现在状态栏。

-view

-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();
        
    }
}

·方法3 隐藏状态栏

-单个页面隐藏

onLoad(){
// #ifdef APP-PLUS  
plus.navigator.setFullscreen(true);
// #endif
},
onUnload(){
/ #ifdef APP-PLUS  
plus.navigator.setFullscreen(false);
// #endif
}

备注：若在页面unLoad() 时未调用plus.navigator.setFullscreen(false);，将导致退出当前页面后其他所有页面的状态栏也都被隐藏了。

-所有页面隐藏

// #ifdef APP-PLUS      
plus.navigator.setFullscreen(true);
// #endif

备注：只能隐藏状态栏，标题栏和虚拟返回键都还可以显示

(2) 改变导航栏颜色

{
"pages": [ 
        "path" : "pages/tabBar/user/user",
        "style" : {
            "app-plus":{
                "titleNView":false //不启用系统导航
            },
            "navigationBarTextStyle":"white"//设置页面导航和状态栏文字颜色
        }
],

"globalStyle": {
        "navigationBarTextStyle": "white",//全局设置导航和状态栏文字颜色
        "navigationBarTitleText": "标题",
        "navigationBarBackgroundColor": "#000000",
        "backgroundColor": "#FFFFFF"
},
}

备注：部分安卓手机不支持

(3)改变状态栏背景颜色

无法直接更改，可以去掉原生状态栏 使用一个占位

var(--status-bar-height) ：此变量在微信小程序环境为固定 25px，在 5+App 里为手机实际状态栏高度。