uni-app 设置 tabBar样式失败

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app 设置 tabBar样式失败

开发环境 版本号 项目创建方式
Windows WIN10 HBuilderX

产品分类：uniapp/H5

浏览器平台：Chrome

示例代码：

onReady(){
uni.setTabBarStyle({
selectedColor: this.baseColor,
})
}

操作步骤：

onReady(){
uni.setTabBarStyle({
selectedColor: this.baseColor,
})
}

预期结果：

字体图标和文字都切换颜色

实际结果：

只有文字切换了颜色，而字体图标没有

bug描述：

调用在tabbat页面调用uni.setTabBarStyle()方法，只能切换文字的颜色，不能切换图标颜色，图标使用字体图标渲染


Harmonyos Next教程
3 回复

不能设置，api也只写明文字选中时的颜色


谢谢回复，刚看了，确实只能修改文字颜色，字体图标了理论上应该也能，但是估计为了兼容图片类型图标，就没支持了

在uni-app中设置tabBar样式通常是通过pages.json配置文件来实现的。如果你发现设置tabBar样式失败，可能是配置不正确或者样式属性不支持。下面是一个基本的配置示例以及一些常见的样式设置，你可以根据这个示例检查你的配置。

首先，确保你的pages.json文件中已经包含了tabBar的基本配置。以下是一个示例配置：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/list/list",
      "style": {
        "navigationBarTitleText": "列表"
      }
    }
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/list/list",
        "text": "列表",
        "iconPath": "static/tabbar/list.png",
        "selectedIconPath": "static/tabbar/list-active.png"
      }
    ]
  }
}

在这个配置中：

  • color 是未选中时的文字颜色。
  • selectedColor 是选中时的文字颜色。
  • borderStyle 是tabBar上边框的颜色，可选值为black或white。
  • backgroundColor 是tabBar的背景颜色。
  • list 数组中的每个对象代表一个tab项，包含pagePath（页面路径）、text（文字）、iconPath（未选中时的图标路径）和selectedIconPath（选中时的图标路径）。

如果设置失败，请检查以下几点：

  1. 路径正确性：确保iconPath和selectedIconPath指定的图片路径正确无误。
  2. 样式属性支持：确保你使用的样式属性是uni-app支持的。有些自定义样式可能需要通过CSS或样式类来实现，而不是直接在pages.json中配置。
  3. 版本兼容性：检查你的uni-app版本是否支持你想要使用的tabBar样式属性。
  4. 缓存问题：有时候IDE或模拟器可能没有及时更新配置，尝试重启IDE或清除缓存。

如果以上都没有问题，但样式仍然没有生效，可以尝试简化配置，逐步排查问题所在。希望这个示例和检查点能帮助你解决问题。

回到顶部