uniapp改變底部安全區(qū)頂部手機信號時間電池欄顏色樣式
更新時間：2023年03月05日 14:21:00 作者：tangdou369098
這篇文章主要為大家介紹了uniapp改變底部安全區(qū)頂部手機信號時間電池欄顏色樣式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
底部安全區(qū)域
uniapp 的默認安全區(qū)域的顏色是白色，如果我們做了沉浸式頁面，背景色也是白色的話，就會看不到電池欄，等的顏色，如何修改呢？
原始狀態(tài)
下圖是底部安全區(qū)原始狀態(tài)，感覺和整個頁面格格不入
修改代碼配置safearea
- manifest.json（下面代碼僅支持ios）
// 在app-plus下配置：
"safearea": { //安全區(qū)域配置，僅iOS平臺生效
"background": "#F5F6F9", //安全區(qū)域外的背景顏色，默認值為"#FFFFFF"
"bottom": { // 底部安全區(qū)域配置
"offset": "none|auto" // 底部安全區(qū)域偏移，"none"表示不空出安全區(qū)域，"auto"自動計算空出安全區(qū)域，默認值為"none"
}
},
- manifest.json（下面代碼支持android）
寫法一：
// #ifdef APP-PLUS
var Color = plus.android.importClass("android.graphics.Color");
plus.android.importClass("android.view.Window");
var mainActivity = plus.android.runtimeMainActivity();
var window_android = mainActivity.getWindow();
window_android.setNavigationBarColor(Color.parseColor("#eb8c76"));
// #endif
寫法二：
// #ifdef APP-PLUS
let color, ac, c2int, win;
color = plus.android.newObject("android.graphics.Color")
ac = plus.android.runtimeMainActivity();
c2int = plus.android.invoke(color, "parseColor", "#000000")
win = plus.android.invoke(ac, "getWindow");
plus.android.invoke(win, "setNavigationBarColor", c2int)
// #endif
底部區(qū)域顏色配置
底部區(qū)域顏色已配置成功（下圖僅供參考，隨便選的顏色，有點丑哈哈）
頂部電池欄的配置
配置頂部導航欄顏色
方案一：僅適用于原生導航配置，非自定義導航
在page.json修改需要配置的頁面的navigationBarTextStyle屬性
"pages": [
{
"path": "pages/index/index",
"style": {
// "navigationStyle": "custom"
"navigationBarTitleText": "我是原生title",
"navigationBarTextStyle": "white" ,// 僅支持 black/white
"navigationBarBackgroundColor": "#aaaaff"
}
}
],
方案一：通用，也適用于自定義導航
在頁面中使用nativejs的api，native是uni內(nèi)置的sdk，不需要手動引入，直接用就可以,但是需要注意調(diào)用時機和條件使用，參考下面的注意事項哦
onReady(){
plus.navigator.setStatusBarStyle("dark"); //只支持dark和light
}
注意事項
注意函數(shù)的調(diào)用時機，如果是自定義導航欄，方法只寫在onReady的話，切換路由再回來以后，你的配置會失效，所以要注意調(diào)用時機
uniapp中 onReady, onLoad, onShow區(qū)別
- onReady 頁面初次渲染完成了，但是渲染完成了，你才發(fā)送請求獲取數(shù)據(jù)，顯得有些慢
- onLoad 只加載一次，監(jiān)聽頁面加載，其參數(shù)為上個頁面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為Object
- onShow 監(jiān)聽頁面顯示。頁面每次出現(xiàn)都觸發(fā)，包括從下級頁面點返回露出當前頁面
舉個栗子
目前我是這樣配置（舉個栗子：配置頂部導航欄背景顏色為黑色）
import { onLoad, onShow, onReady} from '@dcloudio/uni-app';
onReady(() => {
/* #ifdef APP-PLUS */
plus.navigator.setStatusBarStyle('dark');
/* #endif */
});
onShow(() => {
/* #ifdef APP-PLUS */
plus.navigator.setStatusBarStyle('dark');
/* #endif */
});以上就是uniapp改變底部安全區(qū)頂部手機信號時間電池欄顏色樣式的詳細內(nèi)容，更多關(guān)于uniapp改變底部頂部顏色樣式的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文主要介紹了layer彈出層中H5播放器全屏出錯解決&屬性poster底圖占滿video的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了JS猜數(shù)字游戲?qū)嵗?，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
網(wǎng)上關(guān)于這方面的文章有很多，重復的東西本文不再贅述，僅提供思路，并解釋一些其他文章講述模糊的地方。重點給大家介紹下rem.有需要的小伙伴可以參考下。2015-05-05
本文給大家分享一段使用原生Javascript實現(xiàn)的仿京東淘寶豎排二級導航的代碼，非常的實用，有需要的小伙伴參考下2014-12-12
這篇文章主要介紹了微信小程序開發(fā)實戰(zhàn)教程之手勢解鎖的相關(guān)資料,本文分步驟給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
微信瀏覽器內(nèi)置JavaScript對象WeixinJSBridge使用實例
這篇文章主要介紹了微信瀏覽器內(nèi)置JavaScript對象WeixinJSBridge使用實例,本文給出了分享到朋友圈、發(fā)送給好友、分享到騰訊微博、關(guān)注指定的微信號等功能代碼,需要的朋友可以參考下2015-05-05
下面小編就為大家?guī)硪黄狫avaScript正則表達式-非捕獲性分組。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了如何選擇適合你的JavaScript框架，如何選擇一個高效的JS框架經(jīng)驗之談。2017-11-11
這篇文章主要為大家介紹了javascript中的MVC模式，MVC是一種軟件架構(gòu)模式，一般把軟件模式分為三部分，本文就針對MVC模式的三部分進行講解，感興趣的小伙伴們可以參考一下2016-01-01
CocosCreator入門教程之網(wǎng)絡(luò)通信
這篇文章主要介紹了CocosCreator的網(wǎng)絡(luò)通信,內(nèi)容不多，涉及到的細節(jié)，讀者可以根據(jù)實際情況，自己去延申2021-04-04