uniapp|【自用整理】Uniapp导航栏&状态栏 uniapp|uni-app

导航栏 (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 顶部状态栏占位

【uniapp|【自用整理】Uniapp导航栏&状态栏】当设置 "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" }, }