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' },

我是这么搞来搞去 好用的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题