uniapp如何修改tabBar的的样式

uniapp如何修改tabBar的的样式

我们在用uni-app开发app应用使用tabBar进行导航时，想更改一些样式怎么办？官方上很多特定的样式当然满足不了我们的需求。我们一方面可以通过自定义导航的方式对整个导航进行自定义（可通过官网插件市场获取），还有一种就是比较简单粗暴的方式，直接覆盖原样式进行修改。

在项目根路径下的App.vue文件，增加以下代码：

<style lang="scss">

    uni-tabbar {
        .uni-tabbar { // tab背景
            background-image: linear-gradient(to top, #FAF8F8, #FFFFFF)!important; // tab背景图片或者渐变色，背景色和背景图片最多选择一个进行设置
            .uni-tabbar-border { // tabBar上边框
                background-color: #F7F4F4!important; // tabBar上边框的颜色
            }
            .uni-tabbar__bd { // tabBar单项
                .uni-tabbar__icon { // 图标
                    width: 48upx!important;
                    height: 48upx!important;
                }
                .uni-tabbar__label { // 文字
                    font-size: 20upx!important;
                }
            }
        }
    }
</style>