[TOC] # uniapp狀態欄與導航欄 ## 狀態欄遮擋頁面的處理 本地打包時，遇到那么一個問題，狀態欄會浮現于頁面之前，出現遮擋頁面的情況：  解決方案： 在`App.vue`中設置： ```js onLaunch: function() { // #ifdef APP-PLUS // 全屏顯示 plus.navigator.setFullscreen(true); // #endif } ``` 效果如下：  還需要在 `manifest.json` 中配置： ```json { "app-plus" : { "statusbar": { "immersed": false }, } } ``` 這一段配置是用于解決帶有狀態欄的頁面頂部留有間隔的問題。 ## 自定義導航欄 先看看自定義導航欄的效果：  實現方式：在`pages.json`中，對需要自定義導航欄的頁面進行配置： ```json { "pages": [ { "path": "test/test", "style": { "navigationBarTitleText": "測試", "navigationStyle": "default", "app-plus": { "titleNView": { "backgroundColor": "#ff0000", "titleText": "測試app-plus", "titleColor": "#ffffff", "titleSize": "18px", "buttons": [{ "text": "\ue60b", "fontSrc": "/static/fonts/iconfont/iconfont.ttf", "fontSize": "22px", "float": "left" }, { "text": "\ue60b", "fontSrc": "/static/fonts/iconfont/iconfont.ttf", "fontSize": "22px" } ] } } } } ] } ``` 全局導航欄：如果想要每個頁面都擁有自定義導航欄，在`pages.json`中的`globalStyle`節點配置即可： ```json { "globalStyle": { "navigationStyle": "custom", "navigationBarTextStyle": "black", "navigationBarTitleText": "app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "app-plus": { "titleNView": { "backgroundColor": "#ff0000", "titleColor": "#ffffff", "titleSize": "18px" } } } } ``` 配置參數詳解： ```json { "titleNView": { "backgroundColor": "#RRGGBB, 標題欄背景顏色", "titleText": "標題欄標題文字內容", "titleColor": "#RRGGBB, 標題欄標題文字顏色", "titleSize": "17px，標題字體大小，默認大小為17px", "autoBackButton": "true|false，是否顯示標題欄上返回鍵", "backButton": "JSON對象，標題欄上返回鍵樣式", "buttons": [{ "color": "按鈕上的文字顏色", "colorPressed": "按鈕按下狀態的文字顏色", "float": "按鈕在標題欄上的顯示位置", "fontWeight": "按鈕上文字的粗細", "fontSize": "按鈕上文字的大小", "fontSrc": "按鈕上文字使用的字體文件路徑", "text": "按鈕上顯示的文字" }], "splitLine": "JSON對象，標題欄底部分割線樣式" }, } ``` 如果需要監聽導航欄按鍵事件，在對應頁面添加以下代碼： ```js onNavigationBarButtonTap:function(e){ console.log(e.index) }, ``` 通過 `e.index` 區別不同的按鈕，下標從0開始 ## 參考資料 - [CSS變量 --status-bar-height](https://uniapp.dcloud.io/frame?id=css%E5%8F%98%E9%87%8F) - [plus.navigator.setFullscreen](http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.setFullscreen) - [uni-app導航欄開發指南](https://ask.dcloud.net.cn/article/34921) - [uni-app導航欄和狀態欄配置](https://www.jianshu.com/p/7344c4066e82) - [manifest.json 規范](https://uniapp.dcloud.io/collocation/manifest?id=app-plus) - [manifest.json 文檔說明](https://ask.dcloud.net.cn/article/94) - [pages.json app-plus](https://uniapp.dcloud.io/collocation/pages?id=app-plus) - [pages.json 導航欄](https://uniapp.dcloud.io/collocation/pages?id=app-titlenview)