javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > uni.setNavigationBarColor设置无效

uni.setNavigationBarColor设置字体颜色及背景色无效的4个原因及解决

作者:查水表小泰迪

这篇文章主要给大家介绍了关于uni.setNavigationBarColor设置字体颜色及背景色无效的4个原因及正确解决办法,文中还介绍了uni-app设置页面导航条颜色的实例代码,需要的朋友可以参考下

1. 只设置了背景色,背景色无效

//错误示范
uni.setNavigationBarColor({
    backgroundColor:"#c9e5fd"
})

注: 背景色需要和字体颜色同时设置才能生效

2. 字体颜色只支持小写的十六进制,否则字体颜色和背景色均无效

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

3. 字体颜色不能设置除了黑白以外的颜色,否则字体颜色和背景色均无效

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

注: 字体颜色只支持黑白两种颜色:#ffffff 和 #000000

4. 字体颜色不能带空格符号,否则字体颜色及背景色设置无效

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

注:正确代码

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

附:uni-app 设置页面导航条颜色

下述两种方法中颜色限制为十六进制颜色。

1.pages.json页面路由中,用style设置每一个页面的导航栏背景颜色如:

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",//设置页面标题文字
        "enablePullDownRefresh":true//开启下拉刷新

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

2,使用uni.setNavigationBarColor(OBJECT)设置页面导航条颜色。如:

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

Android 上的 backgroundColor 参数有限制,黑色大于 rgb(30,30,30), 白色小于 rgb(235,235,235)

总结 

到此这篇关于uni.setNavigationBarColor设置字体颜色及背景色无效的4个原因及解决的文章就介绍到这了,更多相关uni.setNavigationBarColor设置无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文