直播系統原始碼，uni-app 設定狀態列背景色

直播系統原始碼，uni-app 設定狀態列背景色

在開發中遇到需求是：關閉H5和APP端原生導航欄，但APP端要設定狀態列 背景色。

首先我們要在page.json檔案中關閉原生導航欄，設定狀態類字型顏色。程式碼如下：

"pages": [ 
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首頁",
"navigationBarTextStyle": "black",//設定狀態類字型顏色，只支援white、black這兩個顏色
"app-plus":{"titleNView":false }//關閉H5和APP原生導航欄
}
},
]

然後我們在頁面中建立view標籤，設定動態高度及獲取狀態列高度。程式碼如下：

<!-- 狀態列 -->
<view :style="{ height: iStatusBarHeight + 'px'}" class="stat"></view>

js:

 export default {
        data() {
            return {
                iStatusBarHeight:0
            }
        },
        onLoad() {
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
        }
    }

css:

.stat{
background-color: #ff4e54;
position: fixed;
z-index: 1;
height: var(--status-bar-height);// --status-bar-height系統狀態列高度
width: 100%;
top: 0;
left: 0;
}

取消原生導航欄後，由於窗體為沉浸式，佔據了狀態列位置。此時可以使用一個高度為 var(–status-bar-height) 的 view 放在頁面頂部，避免頁面內容出現在狀態列。

以上就是 直播系統原始碼，uni-app 設定狀態列背景色，更多內容歡迎關注之後的文章