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

 更新时间:2024年01月29日 11:04:10   作者:查水表小泰迪  
这篇文章主要给大家介绍了关于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设置无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序使用picker组件出现的问题探究

    微信小程序使用picker组件出现的问题探究

    这篇文章主要介绍了微信小程序自定义可搜索的picker组件,主要包括自定义可搜索的picker组件的代码以及调用实例,这里的搜索框使用的是vant微信小程序组件库,picker使用的微信小程序的原生组件,需要的朋友可以参考下
    2023-01-01
  • js中符号转意问题示例探讨

    js中符号转意问题示例探讨

    符号转意,大家或许有所了解,知识在使用中或许不是那么的在意,其实这个问题很重要,下面为大家讲解下js符号转意问题相关知识,感兴趣的朋友可以参考下
    2013-08-08
  • 详解js的视频和音频采集

    详解js的视频和音频采集

    这篇文章给大家讲述了关于js的视频和音频采集的相关知识点内容,有需要的朋友们可以学习下。
    2018-08-08
  • SharePoint 客户端对象模型 (一) ECMA Script

    SharePoint 客户端对象模型 (一) ECMA Script

    今天开始SharePoint Client对象模型的介绍,简而言之,SharePoint通过WCF技术在服务端提供数据服务,这些服务提供的内容相当于SharePoint API的一个子集
    2011-05-05
  • 原生javascript实现隔行换色

    原生javascript实现隔行换色

    这篇文章主要介绍了原生javascript实现隔行换色,需要的朋友可以参考下
    2015-01-01
  • 微信小程序中使用自定义图标(阿里icon)的方法

    微信小程序中使用自定义图标(阿里icon)的方法

    这篇文章主要介绍了微信小程序中使用自定义图标(阿里icon)的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • JS函数多个参数默认值指定方法分析

    JS函数多个参数默认值指定方法分析

    这篇文章主要介绍了JS函数多个参数默认值指定方法,结合实例形式分析了javascript函数参数的定义与传递相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • uniapp获取手机通知权限实现demo

    uniapp获取手机通知权限实现demo

    这篇文章主要为大家介绍了uniapp获取手机通知权限实现demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • JavaScript自定义数组排序方法

    JavaScript自定义数组排序方法

    这篇文章主要介绍了JavaScript自定义数组排序方法,实例分析了javascript自定义数组排序的原理与实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • js获取class的所有元素

    js获取class的所有元素

    ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素。
    2013-03-03

最新评论