[TOC] ## pages.json 中設置去掉原生頭部 > 當navigationStyle設為custom或titleNView設為false時，原生導航欄不顯示 ``` { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首頁", // 單個頁面設置 "navigationStyle":"custom" /* "app-plus": { "titleNView": false } */ } }, { "path": "pages/index/list-news", "style": { "navigationBarTitleText": "新聞" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", // 全局設置 "navigationStyle":"custom" /* "app-plus":{ "titleNView":false } */ } } ``` ## 狀態欄 占位div ### 使用css方式進行控制 ~~~ <template> <view> <view class="status_bar"> <!-- 這里是狀態欄 --> </view> <text>狀態欄下的文字</text> </view> </template> <style> .status_bar { height: var(--status-bar-height); width: 100%; } </style> ~~~ ### 使用js方式進行控制 ~~~ <template> <view> <view :style="'height:'+statusHeight+'px'"> <!-- 這里是狀態欄 --> </view> <text>狀態欄下的文字</text> </view> </template> <script> export default { data(){ return { statusHeight:0 } }, onLoad() { this.statusHeight = plus.navigator.getStatusbarHeight(); } } </script> ~~~ > 參考：https://uniapp.dcloud.io/collocation/pages?id=customnav