uni-app寫app的內容會與沉浸欄重合在一起，寫好好多，都是有點問題的，這次終于找到解決的方法了，與大家分享一下

最簡單的解決方式就是配置mainfest.json來關閉沉浸式。即通過打開應用的manifest.json文件，切換到代碼視圖，在app-plus -> statusbar 下添加immersed節點并設置值為false。

"app-plus" : {"statusbar": { "immersed": false }, }

App因為默認為沉浸式，去除導航欄后，頁面頂部會直通到狀態欄的區域，可能出現如下需求：

改變狀態欄文字顏色：設置該頁面的 navigationBarTextStyle 屬性，可取值為 black/white。如果想單獨設置顏色，App端可使用plus.navigator.setStatusBarStyle設置。部分低端Android手機
自身不支持設置狀態欄前景色。
改變狀態欄背景顏色：通過繪制一個占位的view固定放在狀態欄位置，設置此view的背景顏色，即可達到想要的效果，uni-app提供了一個狀態欄高度的css變量，具體參考：uni-app內置的CSS變量。

<template><view><!-- #ifdef APP-PLUS --> <view class="status_bar"> <view class="top_view"></view> </view> <!-- #endif --><view> </view></view> </template><script> export default {data() {return {}},methods: {} } </script><style> .status_bar { height: var(--status-bar-height); width: 100%; background-color: #F8F8F8; } .top_view { height: var(--status-bar-height); width: 100%; position: fixed; background-color: #F8F8F8; top: 0; z-index: 999; } </style>

var(–status-bar-height) 此變量在微信小程序環境為固定 25px，在 5+App 里為手機實際狀態欄高度。
當設置 “navigationStyle”:“custom” 取消原生導航欄后，由于窗體為沉浸式，占據了狀態欄位置。此時可以使用一個高度為 var(–status-bar-height) 的 view 放在頁面頂部，避免頁面內容出現在狀態欄。（實戰過程中此方案仍不能解決頁面內容出現在狀態欄的問題）
設置css變量后解決頁面頂部會直通到狀態欄的區域的問題：設置了css變量后，手機頂部狀態欄區域還是會被頁面內容覆蓋，可使用plus.navigator.getStatusbarHeight();動態計算系統狀態欄的高度barHeight，然后設置頁面主view的樣式:style="{‘margin-top’:barHeight+‘px’}"，來解決。

<template><view class="uni-flex uni-column" style="height: 100%;"><!-- #ifdef APP-PLUS --> <view class="status_bar"> <view class="top_view"></view> </view> <!-- #endif --> <view class="uni-flex uni-row jk-bg-blue uni-center" style="height: 12%;" :style="{'margin-top':barHeight+'px'}"><view class="flex-sub jk-header uni-flex uni-column justify-start" @tap="test1"><text class="text-white cuIcon-scan"></text><text>掃碼</text></view><view class="flex-treble jk-header uni-flex uni-column justify-center" @tap="test2"><text class="text-white cuIcon-rank"></text><text>統計</text></view><view class="flex-sub jk-header uni-flex uni-column justify-end" @click="test3"><text class="text-white cuIcon-exit"></text><text>退出</text></view></view><view class="uni-flex align-center uni-row margin-xs" style="height: 78%;"></view><view class="uni-flex uni-row uni-center" style="height: 10%;color: #000000;background-color: F8F8F8;border-top: 3px solid #eee;"></view></view> </template><script> var _self; export default {components: {uniPopup,},data() {return {barHeight:25,}},methods: {//獲取系統狀態欄高度getSystemStatusBarHeight:function(){// #ifdef APP-PLUSvar height = plus.navigator.getStatusbarHeight();_self.barHeight = height;// #endif// #ifdef H5_self.barHeight = 0;// #endif},},onLoad:function(){_self = this;_self.getSystemStatusBarHeight();} } </script> <style> </style>

直接修改狀態欄顏色（全局）的方式

在pages.json中寫默認的狀態欄配置，我是自定義的頂部欄，所以主要看更改狀態欄的顏色即可

{"path": "pages/index/index","style": {"navigationBarTitleText": "首頁","app-plus":{"titleNView":false //去掉當前頁的頂部導航欄},"navigationBarBackgroundColor":"#FE5786","navigationBarTextStyle":"white" //狀態欄字體顏色}},

動態修改狀態欄顏色，style可設置為dark和light ，字符串類型

void plus.navigator.setStatusBarStyle(style);void plus.navigator.setStatusBarStyle("dark"); //黑色void plus.navigator.setStatusBarStyle("light");//白色

總結

以上是生活随笔為你收集整理的uni-app导航栏配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。