uni-app tabBar 配置：自定义底部导航栏

阿珊和她的猫

于 2025-06-27 06:30:00 发布

阅读量2.4k

点赞数 13

CC 4.0 BY-SA版权

文章标签： uni-app 状态模式

本文链接：https://blog.csdn.net/weixin_42554191/article/details/148817026

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

在 uni-app 中，tabBar 是底部导航栏的配置项，可以在 pages.json 文件中进行设置。以下是一些关于 tabBar 配置的要点：

基本配置

{
"tabBar": {
"custom": false, // 是否自定义 tabBar
"color": "#7A7E83", // tabBar 上文字的颜色
"selectedColor": "#3cc51f", // 选中文字的颜色
"borderStyle": "black", // tabBar 上边框的颜色
"list": [ // 导航配置项列表
{
"pagePath": "pages/index/index", // 页面访问路径
"text": "首页", // 页面文字
"iconPath": "static/icons/home.png", // 图标路径
"selectedIconPath": "static/icons/home-active.png" // 选中图标路径
},
// ... 其他页面配置
]
}
}

自定义 tabBar

如果需要更高级的自定义，可以将 custom 设置为 true，并在 pages.json 中添加 "customTabBar" 字段，指向自定义组件的路径。

{
"tabBar": {
"custom": true,
"customTabBar": "components/custom-tab-bar/custom-tab-bar"
}
}

然后，在自定义组件中实现自己的 tabBar 逻辑。

注意事项

tabBar 配置中的 list 数组长度应与项目中 pages 数组的长度一致。
pagePath 必须是 pages 数组中存在的页面路径。
iconPath 和 selectedIconPath 应该是项目中存在的图片资源路径。
当 custom 设置为 true 时，uni-app 将不会自动生成默认的 tabBar，而是使用自定义组件。

示例代码

以下是一个简单的 tabBar 配置示例：

{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/logs/logs"
}
],
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/icons/home.png",
"selectedIconPath": "static/icons/home-active.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "static/icons/logs.png",
"selectedIconPath": "static/icons/logs-active.png"
}
]
}
}