🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[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