Uniapp 修改uview tabbar样式无效?

<u-tabbar :value="tabName" @change="handleClick" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
    :customStyle="btnGetCode" activeColor="#1D62FF">
    <u-tabbar-item text="首页" icon="home" name="home"></u-tabbar-item>
    <u-tabbar-item text="地图" icon="map" name="map"></u-tabbar-item>
    <u-tabbar-item text="菜单" name="menu" icon="file-text"></u-tabbar-item>
    <u-tabbar-item text="我的" name="me" icon="account"></u-tabbar-item>
  </u-tabbar>

css

<style lang="scss" scoped>
::v-deep .u-tabbar {
  position: relative;
  background-color: #1D62FF !important;
  z-index: 99999;
}

::v-deep .u-tabbar__content__item-wrapper>view {
  background-color: #1D62FF !important;
  color: #fff;
}

::v-deep .u-tabbar-item__text span {
  color: #fff;
}

::v-deep .u-icon__icon span {
  color: #fff;
}
</style>

底部tabbar 用的uview的组件,因为app里面有修改主题的功能,所以要修改底部tabbar的背景颜色,但是修改好几次 都无效 各种写法都尝试过

用原生的tabbar的话 因为有的页面有底部组件 有的页面没有底部 不知道要怎么配置

阅读 4.3k
1 个回答

\node_modules\uview-ui\components\u-tabbar
u-tabbar中组件里
data同级别下 添加
options: { styleIsolation: 'shared' },
然后在 封装的 这个组件里面 也添加
options: { styleIsolation: 'shared' },

我是这么搞来搞去 好用的

推荐问题