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

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

文章目录

• • 基本配置
  • 自定义 tabBar
  • 注意事项
  • 示例代码

在 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\"}]}}

在上面的配置中，定义了两个底部导航项，分别是“首页”和“日志”，并为它们分别设置了图标和选中图标。

通过合理配置 tabBar，可以为用户提供一个清晰、直观的底部导航体验。