lvlanqiu@163.com
lvlanqiu@163.com
  • 发布:1 天前
  • 更新:4 小时前
  • 阅读:33

【报Bug】原生导航栏用setNavigationBarColor设置前景色,背景颜色和右侧按钮颜色相同,导致按钮不容易被用户看见

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window10

HBuilderX类型: 正式

HBuilderX版本号: 2.7.14

手机系统: iOS

手机系统版本号: iOS 11.1

手机厂商: 苹果

手机机型: iphone6s

页面类型: vue

nvue编译模式: fast

打包方式: 云端

项目创建方式: 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描述:

导航栏背景色默认白色,右侧按钮黑色,改为黑色背景,右侧按钮仍然是黑色

1 天前 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_家兴

DCloud_UNI_家兴

在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  
        }  
DCloud_UNI_家兴

DCloud_UNI_家兴

uni-app导航栏文档和注意事项:https://uniapp.dcloud.io/collocation/pages?id=app-titlenview;
导航栏开发指南:https://ask.dcloud.net.cn/article/34921;
导航栏演示示例:https://ext.dcloud.net.cn/plugin?id=1765

要回复问题请先登录注册