我们在用 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。