// 定义导航栏颜色
let fontColor = this.themeColor=='night'?'#ffffff':'#000000';
let backgroundColor = this.themeColor=='night'?'#191919':'#ffffff';
uni.setNavigationBarColor({
frontColor: fontColor,
backgroundColor: backgroundColor,
});
l***@163.com
- 发布：2020-07-01 11:43
- 更新：2020-07-02 10:19
- 阅读：1741
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window10
HBuilderX类型： 正式
HBuilderX版本号： 2.7.14
手机系统： iOS
手机系统版本号： iOS 11.1
手机厂商： 苹果
手机机型： iphone6s
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
let fontColor = this.themeColor=='night'?'#ffffff':'#000000';
let backgroundColor = this.themeColor=='night'?'#191919':'#ffffff';
uni.setNavigationBarColor({
frontColor: fontColor,
backgroundColor: backgroundColor,
});
let fontColor = this.themeColor=='night'?'#ffffff':'#000000';
let backgroundColor = this.themeColor=='night'?'#191919':'#ffffff';
uni.setNavigationBarColor({
frontColor: fontColor,
backgroundColor: backgroundColor,
});
预期结果：
右侧按钮应该改为设置的白色
右侧按钮应该改为设置的白色
实际结果：
右侧按钮仍然是黑色
右侧按钮仍然是黑色
bug描述：
导航栏背景色默认白色，右侧按钮黑色，改为黑色背景，右侧按钮仍然是黑色
最佳回复
在app上，导航栏上的图标和导航背景色相同这一类问题，可以通过 H5+ 的 API 来处理，注意: 这个方案不能跨端，小程序和
H5 上目前不能自定义，一个简便的办法是从产品上解决，设计好图标和导航栏背景色的不要撞即可，建议从设计上解决这个问题。
data() {
return {
themeColor: 'night'
}
},
onReady() {
let fontColor = this.themeColor=='night'?'#ffffff':'#000000';
let backgroundColor = this.themeColor=='night'?'#191919':'#ffffff';
uni.setNavigationBarColor({
frontColor: fontColor,
backgroundColor: backgroundColor,
});
// #ifdef APP-PLUS
// 获取上该页面上的 webview
let webview = this.$scope.$getAppWebview();
// 将导航栏中的第n个图标，只有一个即下标为 0 (数组下标从 0 开始)
// 使用 H5+ API setTitleNViewButtonStyle 将 color设为想要的颜色
// H5+ API具体参见 http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.setTitleNViewButtonStyle
webview.setTitleNViewButtonStyle(0, {color: '#00000'});
// #endif
}
l***@163.com (作者)
感谢！
2020-07-02 07:59