uni-app setNavigationBarColor的frontColor参数，在app下对于标题栏图标按钮无效

uni-app setNavigationBarColor的frontColor参数，在app下对于标题栏图标按钮无效

开发环境 版本号 项目创建方式
Windows Windows7 HBuilderX 
操作步骤：
首先在page.js里面定义标题的button图标，引入外部iconfont库。

{  
    "path": "页面路径",  
    "style": {  
        "app-plus": {  
            "bounce": "none",  
            "titleNView": {  
                "buttons": [{  
                    "text": "\ueb9f",  
                    "fontSize": "20",  
                    "fontSrc": "/static/iconfont.ttf"  
                }]  

            },  
        }  
    }  
},

uni.setNavigationBarColor({  
    frontColor: '#ffffff',  
    backgroundColor: '#111111',  
})  

就会发现，在H5下文字和图标都变为白色，APP下文字白色，图标颜色仍旧不变。

预期结果：
全端下，文字和图标颜色都变为白色

实际结果：
h5下正常，APP下只有文字白色，图标颜色仍旧不变

bug描述：
在对标题栏的背景和文字颜色进行动态定义的时候，发现在app下frontColor参数是无效的。
我在page.js中的定义如下：

{  
    "path": "页面路径",  
    "style": {  
        "app-plus": {  
            "bounce": "none",  
            "titleNView": {  
                "buttons": [{  
                    "text": "\ueb9f",  
                    "fontSize": "20",  
                    "fontSrc": "/static/iconfont.ttf"  
                }]  

            },  
        }  
    }  
},  

uni.setNavigationBarColor({  
    frontColor: '#ffffff',  
    backgroundColor: '#111111',  
})

在H5下的效果是正常的  


在app下的效果则是右侧图标依然为原本的颜色


更多关于uni-app setNavigationBarColor的frontColor参数，在app下对于标题栏图标按钮无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

确实有这个问题，很奇怪

更多关于uni-app setNavigationBarColor的frontColor参数，在app下对于标题栏图标按钮无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app平台差异问题。setNavigationBarColor的frontColor参数在App端确实无法改变自定义字体图标的颜色。

问题原因： 在App端，titleNView中通过fontSrc引入的字体图标被视为图片资源，不受frontColor控制。而H5端则是将字体图标作为文字处理，所以能正常变色。

解决方案：

  1. 使用原生图标：将buttons配置改为使用系统原生图标
"buttons": [{
    "type": "share"  // 或其他原生图标类型
}]

  1. 预置多色图标：准备不同颜色的图标文件，通过条件判断动态切换fontSrc路径

  2. 使用图片按钮：改用backgroundImage方式设置图标

"buttons": [{
    "backgroundImage": "/static/white-icon.png"
}]
回到顶部