uniapp - 自定义页面的tabBar

yede2025-08-22 11:17

一、丑丑的原始底部栏

众所周知uniapp自带的底部导航栏只有基础的样式，再加点图标不那么单调，所以App的最初版本的tabBar如图一所示

图一

在迭代的时候，UI受不了这个丑丑的tabBar，改成了图二所示的样式

图二

我看完我头都大了，我印象中，自带的tabBar好像玩不了这么花！

二、咱们看看文档怎么说

人家文档都说了，可以给你配置一点背景色、图标、高度、字体啥的，单单靠文档的配置是很难弄成我想要的。

那没办法了，只能自己写tabBar，但是作为App的基础页面，我们需要保留tabBar页面的的跳转特性，可以看下几个跳转函数的特点

三、让原生的tabBar消失

人家文档都说了，可以给tabBar设置height，那我们把height设置成0，再把list[x].visible设置为false，就可以把整个tabBar消失了

注意，list还是需要配置，且至少是2个

json 复制代码

{
    "tabBar": {
        "height": "0",
        "list": [
          {
            "pagePath": "pages/home/home",
            "visible": false
          },
          {
            "pagePath": "pages/userCenter/userCenter",
            "visible": false
          }
        ]
    }
}

四、愉快得写UI想要的tabBar

原生丑的tabBar已经消失了，剩下的就是根据UI要求写自定义tabBar了

需要注意的是，点击tabBar跳转的时候，需要用switchTab去做跳转，而非navigateTo