* [pages.json 中设置去掉原生头部](https://www.kancloud.cn/wangking/uniapp/1728686#pagesjson__1) * [状态栏 占位div](https://www.kancloud.cn/wangking/uniapp/1728686#_div_37) * [使用css方式进行控制](https://www.kancloud.cn/wangking/uniapp/1728686#css_38) * [使用js方式进行控制](https://www.kancloud.cn/wangking/uniapp/1728686#js_56) ## 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](https://uniapp.dcloud.io/collocation/pages?id=customnav)