快捷導(dǎo)航

uni.setNavigationBarColor設(shè)置字體顏色及背景色無效的4個原因及解決

更新時間：2024年01月29日 11:04:10 作者：查水表小泰迪

這篇文章主要給大家介紹了關(guān)于uni.setNavigationBarColor設(shè)置字體顏色及背景色無效的4個原因及正確解決辦法,文中還介紹了uni-app設(shè)置頁面導(dǎo)航條顏色的實(shí)例代碼,需要的朋友可以參考下

1. 只設(shè)置了背景色，背景色無效
2. 字體顏色只支持小寫的十六進(jìn)制，否則字體顏色和背景色均無效
3. 字體顏色不能設(shè)置除了黑白以外的顏色，否則字體顏色和背景色均無效
4. 字體顏色不能帶空格符號，否則字體顏色及背景色設(shè)置無效
注：正確代碼
附：uni-app 設(shè)置頁面導(dǎo)航條顏色
總結(jié)

1. 只設(shè)置了背景色，背景色無效

//錯誤示范
uni.setNavigationBarColor({
    backgroundColor:"#c9e5fd"
})

注：背景色需要和字體顏色同時設(shè)置才能生效

2. 字體顏色只支持小寫的十六進(jìn)制，否則字體顏色和背景色均無效

//錯誤示范 1
uni.setNavigationBarColor({
    frontColor:"#fff",
    backgroundColor:"#c9e5fd"
})
// 錯誤示范 2
uni.setNavigationBarColor({
    frontColor:"#FFFFFF",
    backgroundColor:"#c9e5fd"
})

3. 字體顏色不能設(shè)置除了黑白以外的顏色，否則字體顏色和背景色均無效

//錯誤示范
uni.setNavigationBarColor({
    frontColor:"#c9e5fd",
    backgroundColor:"#c9e5fd"
})

注：字體顏色只支持黑白兩種顏色：#ffffff 和 #000000

4. 字體顏色不能帶空格符號，否則字體顏色及背景色設(shè)置無效

//錯誤示范
uni.setNavigationBarColor({
    frontColor:" #000000",
    backgroundColor:" #c9e5fd",
})

注：正確代碼

// 正確示范
uni.setNavigationBarColor({
	frontColor:"#ffffff",
	backgroundColor:"#c9e5fd",
})

附：uni-app 設(shè)置頁面導(dǎo)航條顏色

下述兩種方法中顏色限制為十六進(jìn)制顏色。

1.pages.json頁面路由中，用style設(shè)置每一個頁面的導(dǎo)航欄背景顏色如：

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首頁",//設(shè)置頁面標(biāo)題文字
        "enablePullDownRefresh":true//開啟下拉刷新

"navigationBarBackgroundColo","#000000"
      }
    },
    ...
  ]
}

2,使用uni.setNavigationBarColor(OBJECT)設(shè)置頁面導(dǎo)航條顏色。如：

uni.setNavigationBarColor({
    backgroundColor: '#ff0000',
})

Android 上的 backgroundColor 參數(shù)有限制，黑色大于 rgb(30,30,30), 白色小于 rgb(235,235,235)

總結(jié)

到此這篇關(guān)于uni.setNavigationBarColor設(shè)置字體顏色及背景色無效的4個原因及解決的文章就介紹到這了,更多相關(guān)uni.setNavigationBarColor設(shè)置無效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: