uniapp 的默認(rèn)安全區(qū)域的顏色是白色，如果我們做了沉浸式頁(yè)面，背景色也是白色的話，就會(huì)看不到電池欄，等的顏色，如何修改呢？
首先來說底部安全區(qū)域
下圖是底部安全區(qū)原始狀態(tài)，感覺和整個(gè)頁(yè)面格格不入
修改代碼配置safearea
- manifest.json（下面代碼僅支持ios）
// 在app-plus下配置：
"safearea": { //安全區(qū)域配置，僅iOS平臺(tái)生效
"background": "#F5F6F9", //安全區(qū)域外的背景顏色，默認(rèn)值為"#FFFFFF"
"bottom": { // 底部安全區(qū)域配置
"offset": "none|auto" // 底部安全區(qū)域偏移，"none"表示不空出安全區(qū)域，"auto"自動(dòng)計(jì)算空出安全區(qū)域，默認(rèn)值為"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ū)域顏色已配置成功（下圖僅供參考，隨便選的顏色，有點(diǎn)丑哈哈）
接下來講一下頂部電池欄的配置
配置頂部導(dǎo)航欄顏色
方案一：僅適用于原生導(dǎo)航配置，非自定義導(dǎo)航
在page.json修改需要配置的頁(yè)面的navigationBarTextStyle屬性
"pages": [
{
"path": "pages/index/index",
"style": {
// "navigationStyle": "custom"
"navigationBarTitleText": "我是原生title",
"navigationBarTextStyle": "white" ,// 僅支持 black/white
"navigationBarBackgroundColor": "#aaaaff"
}
}
],
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-yAzbkfR8-1677942313817)(https://img2023.cnblogs.com/blog/1675284/202303/1675284-20230304224849591-1728658694.png)]
方案一：通用，也適用于自定義導(dǎo)航
在頁(yè)面中使用nativejs的api，native是uni內(nèi)置的sdk，不需要手動(dòng)引入，直接用就可以,但是需要注意調(diào)用時(shí)機(jī)和條件使用，參考下面的注意事項(xiàng)哦
onReady(){
plus.navigator.setStatusBarStyle("dark"); //只支持dark和light
}
注意事項(xiàng)
注意函數(shù)的調(diào)用時(shí)機(jī)，如果是自定義導(dǎo)航欄，方法只寫在onReady的話，切換路由再回來以后，你的配置會(huì)失效，所以要注意調(diào)用時(shí)機(jī)
uniapp中 onReady, onLoad, onShow區(qū)別
-
onReady 頁(yè)面初次渲染完成了，但是渲染完成了，你才發(fā)送請(qǐng)求獲取數(shù)據(jù)，顯得有些慢
-
onLoad 只加載一次，監(jiān)聽頁(yè)面加載，其參數(shù)為上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為Object
-
onShow 監(jiān)聽頁(yè)面顯示。頁(yè)面每次出現(xiàn)都觸發(fā)，包括從下級(jí)頁(yè)面點(diǎn)返回露出當(dāng)前頁(yè)面
目前我是這樣配置（舉個(gè)栗子：配置頂部導(dǎo)航欄背景顏色為黑色）
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 */
});
今天就寫到這里啦~
- 小伙伴們，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我們明天再見啦~~
- 大家要天天開心哦
歡迎大家指出文章需要改正之處~
學(xué)無(wú)止境，合作共贏文章來源：http://www.zghlxwxcb.cn/news/detail-421845.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-421845.html
歡迎路過的小哥哥小姐姐們提出更好的意見哇~~
到了這里，關(guān)于uniapp系列-改變底部安全區(qū)-頂部的手機(jī)信號(hào)、時(shí)間、電池欄顏色樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
