uniapp - 自定义页面的tabBar

一、丑丑的原始底部栏

众所周知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

相关推荐
两个西柚呀19 小时前
Vue组件的一些底层细节
前端·javascript·vue.js
paopaokaka_luck19 小时前
基于SpringBoot+Vue的DIY手工社预约管理系统(Echarts图形化、腾讯地图API)
java·vue.js·人工智能·spring boot·后端·echarts
计算机学姐1 天前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
游戏开发爱好者81 天前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
哆啦A梦15881 天前
点击Top切换数据
前端·javascript·vue.js
小光学长1 天前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
麦麦大数据1 天前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
菜鸟una1 天前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年1 天前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
我的div丢了肿么办1 天前
js函数声明和函数表达式的理解
前端·javascript·vue.js