uni-app 导航栏自定义按钮字体默认颜色没法更改

uni-app 导航栏自定义按钮字体默认颜色没法更改

操作步骤：

  • 1

预期结果：

  • 2

实际结果：

  • 3

bug描述：

APP nvue下，自定义导航栏按钮，没法更改默认颜色，因为用了沉浸式，上划页面才显示导航栏背景等，但是自定义按钮字体默认颜色没法更改，默认是白色的，按照h5+的文档描述，目前更改窗口标题栏控件的标题文字颜色没法更改默认颜色
color: (String 类型 )按钮上文字颜色
可取值： “#RRGGBB"格式字符串，如”#FF0000"表示红色； “rgba(R,G,B,A)”，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。 默认值为窗口标题栏控件的标题文字颜色。

图片

Image 1
Image 2
Image 3

项目信息

项目信息 值
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.4.7
手机系统 Android
手机系统版本号 Android 10
手机厂商 小米
手机机型 米10
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 导航栏自定义按钮字体默认颜色没法更改的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

type设置为transparent时，color只能在非透明状态下生效，在透明状态下color固定为白色（不能修改），这时可以设置按钮的background来避免与内容区域颜色一致。

更多关于uni-app 导航栏自定义按钮字体默认颜色没法更改的实战教程也可以访问 https://www.itying.com/category-93-b0.html


那这个有点死板了，设计师给我的图，就是默认黑色，相当于自定义按钮这块不管滑不滑动都不变，然后往上滑显示标题和标题栏的背景，下一版能否调整一下呢？

奇怪了，别人的问题能回答，我这个真实存在的问题没人理的。

请上传一个能重现问题的测试工程

测试工程在回复里了，谢谢

再补充一点，我怕描述不到位，因为这个是上划页面才显示那个导航栏，所以我想要的是，自定义按钮在没有上划前，按钮的颜色应该可以给我们定义，而不是默认为白色，不然就很不灵活了，因为页面背景是白色的时候，就看不到这几个按钮了，除非用户上划页面。

咋样，这个是bug吗，还是说不支持这个操作

其实这个就是把我截图pages.json的代码复制到一个新的工程里面，如果我的pages代码没问题，那就是存在bug，因为自定义按钮的默认颜色没法改变，不管改哪个参数，都是白色的，这就很不灵活了，如果代码有问题，可以指点一下怎么写，非常感谢！

在 uni-app 中，导航栏（Navigation Bar）的自定义按钮字体颜色默认是黑色的，如果你想要更改这个颜色，可以通过以下几种方式来实现：

1. 使用 uni.setNavigationBarColor

你可以使用 uni.setNavigationBarColor 方法来动态设置导航栏的背景色和前景色（包括按钮颜色）。

uni.setNavigationBarColor({
    frontColor: '#ffffff', // 前景色，包括按钮颜色
    backgroundColor: '#000000' // 背景色
});

2. 使用 navigationBarTextStyle

在 pages.json 中，你可以通过 navigationBarTextStyle 来设置导航栏的文字颜色。这个属性只支持 black 和 white 两种值。

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",
                "navigationBarTextStyle": "white" // 白色文字
            }
        }
    ]
}

3. 使用自定义导航栏

如果你需要更复杂的自定义，可以考虑完全自定义导航栏。你可以隐藏默认导航栏，然后在页面顶部创建一个自定义的导航栏组件。

在 pages.json 中隐藏默认导航栏：

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",
                "navigationStyle": "custom" // 隐藏默认导航栏
            }
        }
    ]
}

然后在页面中使用自定义的导航栏组件：

<template>
    <view class="custom-nav-bar">
        <text class="nav-title">首页</text>
        <button class="nav-button">按钮</button>
    </view>
</template>

<style>
.custom-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #000000;
    color: #ffffff;
}

.nav-title {
    font-size: 16px;
}

.nav-button {
    background-color: transparent;
    color: #ffffff;
    border: none;
}
</style>

4. 使用 uni.getSystemInfoSync

如果你需要根据系统信息动态调整导航栏颜色，可以使用 uni.getSystemInfoSync 获取系统信息，然后根据系统信息设置导航栏颜色。

const systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'ios') {
    uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#000000'
    });
} else {
    uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#ffffff'
    });
}
回到顶部