uni-app tabBar 样式修改

朱雀 2021-03-23 10:13 3103阅读 0赞

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

效果如下（比较丑，只是简单示意下）：

![](/images/20210323/1616494386006.png)

发表评论取消回复

表情：

评论列表（有 0 条评论，3103人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 动态设置 tabBar 的整体样式

[uni.setTabBarItem(OBJECT)][uni.setTabBarItem_OBJECT] 动态设置 tabBar 某一项的内容平台差异说明 <ta

Bertha 。/ 2023年06月27日 03:53/ 0 赞/ 38 阅读

相关 uniapp 中修改 uni-checkbox 默认样式

uniapp checkbox 默认样式是 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

痛定思痛。/ 2023年01月08日 08:04/ 0 赞/ 356 阅读

相关 android 关于封装tabbar，任意修改样式

![Center][] 主要代码： package com.sun.framework.CustomizeVC; import a

ゝ一纸荒年。/ 2022年06月10日 14:12/ 0 赞/ 205 阅读

相关 uniapp之tabBar/页面切换

1.uniapp目录结构 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

╰半夏微凉°/ 2021年09月13日 15:24/ 0 赞/ 5449 阅读

相关 uniapp中设置TabBar

效果图： ![20210306175717503.gif][] 结构目录： ![20210306175848772.png][] pages.json:

超、凢脫俗/ 2021年07月26日 00:34/ 0 赞/ 2371 阅读

相关 uniapp修改下拉刷新默认样式(修改默认颜色)

我们在uniapp项目开发中会遇到,下拉刷新的颜色默认为绿色,有时候我们不想用,一段代码解决这个问题. 首先打开pages.json文件找到要启用下拉刷新的界面,然后按如下

我就是我/ 2021年07月25日 23:16/ 0 赞/ 4425 阅读

相关 uniapp——配置基本的tabbar

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

淡淡的烟草味﹌/ 2021年07月25日 19:51/ 0 赞/ 587 阅读

相关 uniapp-tabBar中间凸起按钮

前言：以下是使用的是原生方法，兼容会比绘制按钮的好，不用写更多代码去让图标固定到tabBar位置。官网有提到“中间按钮仅在 list 项为偶数时有效”，这需要注意，另外在中间

秒速五厘米/ 2021年07月25日 00:51/ 0 赞/ 1446 阅读

相关 uniapp 导航栏tabBar

注意: (1)当设置导航栏在顶部,即position为top时,只能配置文字,不能配置图标 (2)当设置导航栏在顶部时,仅微信有效 (3)图标不

超、凢脫俗/ 2021年07月24日 23:15/ 0 赞/ 869 阅读

相关 uni-app tabBar 样式修改

我们在用 uni-app 开发手机端应用时，会较多使用 tabBar 进行导航。如果想更改他的样式怎么办？当然可以通过自定义导航的方式对整个导航进行自定义（可通过官网插件...

朱雀/ 2021年03月23日 10:13/ 0 赞/ 3104 阅读