uniapp 修改tabBar图标大小和navigationBar字体大小(转载，仅作记录)

Gabriel_wei

已于 2022-05-23 01:17:09 修改

阅读量1w

点赞数 2

分类专栏： Uniapp 文章标签：前端

于 2022-05-23 01:17:07 首次发布

本文链接：https://blog.csdn.net/Gabriel_wei/article/details/124919599

版权

Uniapp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一个

H5能用，实测微信小程序不能用，APP未测

//导航栏字体
.uni-page-head .uni-page-head__title {
	font-size: 15px !important;
}
// tab图标
.uni-tabbar .uni-tabbar__icon {
	width: 20px !important;
	height: 20px !important;
}

转自

第二个

未测

在项目根路径下的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>