我们在用 uni-app 开发手机端应用时，会较多使用 tabBar 进行导航。如果想更改他的样式怎么办？当然可以通过自定义导航的方式对整个导航进行自定义（可通过官网插件市场获取），这里介绍一种比较粗暴的修改方式，就是直接通过覆盖原样式的方式达到预期目的。
废话不多说，直接上代码，在项目根路径下的 App.vue文件，增加以下代码：
<style lang="scss">
.uni-app--showtabbar uni-page-wrapper:after {
height: 80rpx;
height: calc(80rpx + constant(safe-area-inset-bottom));
height: calc(80rpx + env(safe-area-inset-bottom));
}
uni-tabbar {
.uni-tabbar { // tab 背景
background-color: rgba(57, 181, 74, 0.1)!important; // tab 背景色
background-image: linear-gradient(to top, #a80077, #66ff00)!important; // tab 背景图片，也可以是渐变色，背景色和背景图片最多选择一个进行设置
.uni-tabbar-border { // tabBar 上边框
background-color: #e54d42!important; // tabBar 上边框的颜色
}
.uni-tabbar__bd { // tabBar 单项
height: 80px!important;
.uni-tabbar__icon { // tabBar 图标
width: 40px!important;
height: 40px!important;
}
.uni-tabbar__label { // tabBar 文字
font-size: 14px!important;
}
}
}
.uni-tabbar~.uni-placeholder {
height: 80rpx;
}
}
</style>效果如下（比较丑，只是简单示意下）：
如果您要修改 tabBar 的其他样式，可以参照以上方法重写样式进行覆盖，如果不生效，记得加上 !important。
版权属于：瞭月
本文链接：https://www.lervor.com/archives/54/
版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。
3 条评论
这个可以有
怎么把tabBar应用到其他页面
建议自定义tabBar，插件市场搜索下，很多