uni-app tabar选中某一个增加背景色

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

uni-app tabar选中某一个增加背景色

tabar分别是选项1和选项2。

选项1 默认背景色是红色字体是黑色，选中后背景色变成绿色，未被选中是背景是红色

选项2 默认背景色是红色字体是黑色，选中后背景色变成绿色，未被选中是背景是红色

图片

Harmonyos Next教程
5 回复

使用自定义的tabbar


除过自定义还有别的办法吗

如果确实想用原生tabbar，可以使用uni.setTabBarStyle(OBJECT)，来更改tabbar图片背景，你需要准备两张图片背景：
1张图是选项1选中状态和选项2未选中状态 另外一张图是选项1未选中状态和选项2选中状态 希望对你有帮助！

uni.setTabBarStyle(OBJECT) 设置背景图不生效啊 有其他办法吗

在uni-app中，自定义TabBar选中项的背景色可以通过修改TabBar的样式来实现。uni-app 允许你通过配置 pages.json 文件中 tabBar 的 style 和 color 属性来设置TabBar的默认样式，但直接修改选中项的背景色需要借助一些CSS技巧。

以下是一个示例，展示如何通过自定义CSS来实现TabBar选中项的背景色变化。

1. 配置 pages.json

首先，确保在 pages.json 中正确配置了 tabBar。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/news/news",
      "style": {
        "navigationBarTitleText": "新闻"
      }
    }
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/news/news",
        "text": "新闻"
      }
    ]
  }
}

2. 自定义CSS

由于uni-app的TabBar样式较为固定，直接通过配置修改选中背景色较为困难，可以通过覆盖默认样式实现。这里，我们假设你已经有一个自定义的TabBar组件（如果没有，可以考虑自己写一个）。

在App.vue或者某个全局样式文件中，添加以下CSS代码（注意：实际开发中可能需要调整选择器以确保覆盖默认样式）：

/* 自定义TabBar选中项背景色 */
.custom-tab-bar .tab-item.active {
  background-color: #3cc51f !important; /* 使用 !important 确保覆盖默认样式 */
  color: #ffffff !important; /* 可选：同时修改文字颜色 */
}

/* 确保其他未选中项样式正常 */
.custom-tab-bar .tab-item {
  background-color: #ffffff !important;
  color: #7A7E83 !important;
}

3. 自定义TabBar组件

如果你使用自定义TabBar组件，确保你的组件结构类似如下，并添加相应的class：

<template>
  <view class="custom-tab-bar">
    <view class="tab-item" :class="{ active: activeIndex === 0 }">首页</view>
    <view class="tab-item" :class="{ active: activeIndex === 1 }">新闻</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0 // 当前选中项索引
    };
  }
};
</script>

总结

以上方法通过自定义CSS和TabBar组件，实现了uni-app中TabBar选中项背景色的自定义。根据实际需求，你可能需要调整选择器或样式。确保在真机或模拟器中测试，以验证样式的正确性和兼容性。

回到顶部