uniapp中如何设置底部导航的页面

在 uni-app 中设置底部导航（通常称为 TabBar）是一个核心功能，它能极大提升应用的用户体验。实现起来非常直接，主要通过配置 pages.json文件来完成。下面这张表格汇总了核心的配置选项，帮助你快速掌握全局。

配置类别	关键属性	说明与示例
基本设置​	color, selectedColor, backgroundColor, borderStyle	定义导航栏的整体样式，如未选中颜色、选中颜色、背景色和边框。
导航项列表​	list	至少2个，最多5个导航项组成的数组，定义了每个选项卡。
单个导航项​	pagePath, text, iconPath, selectedIconPath	分别对应页面路径、显示文本、默认图标和选中时图标。
高级样式​	height, iconWidth, midButton	可自定义高度、图标尺寸，甚至配置凸起的中间按钮。

详细配置步骤

1. 创建页面文件 首先，确保你希望在底部导航中显示的每一个页面都已经创建。通常这些页面存放在项目的 pages目录下。例如，你的项目可能需要 index（首页）、category（分类）、cart（购物车）和 user（个人中心）页面。
2. 准备图标资源 为每个选项卡准备两种状态的图标：未选中状态和选中状态。图标文件通常放在 static目录下，例如 static/tabbar/home.png和 static/tabbar/home-active.png。你可以从阿里巴巴矢量图标库（Iconfont）等平台获取图标。
3. 配置 pages.json文件 这是最关键的一步。在项目根目录的 pages.json文件中，添加 tabBar配置节点。以下是一个包含四个选项卡的常见示例： { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/category/category", "style": { "navigationBarTitleText": "分类" } }, { "path": "pages/cart/cart", "style": { "navigationBarTitleText": "购物车" } }, { "path": "pages/user/user", "style": { "navigationBarTitleText": "个人中心" } } ], "tabBar": { "color": "#999999", "selectedColor": "#007AFF", "backgroundColor": "#FFFFFF", "borderStyle": "black", "height": "50px", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/home-active.png" }, { "pagePath": "pages/category/category", "text": "分类", "iconPath": "static/tabbar/category.png", "selectedIconPath": "static/tabbar/category-active.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "static/tabbar/cart.png", "selectedIconPath": "static/tabbar/cart-active.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "static/tabbar/user.png", "selectedIconPath": "static/tabbar/user-active.png" } ] } }

重要规则与常见问题

• 页面路径必须正确定义：tabBar的 list数组中每个项的 pagePath必须在 pages数组中有正确定义，并且pages数组中的第一项，其路径必须与 tabBar中第一个选项卡的 pagePath保持一致，否则底部导航可能无法显示。
• 导航项数量限制：底部导航的选项卡数量最少2个，最多5个。
• TabBar 不显示怎么办：如果配置后底部导航没有显示，请按以下步骤排查：
  1. 检查 pages.json中的 tabBar配置语法是否正确，特别是括号是否配对。
  2. 确认 pagePath指向的页面路径是否在 pages数组中正确定义。
  3. 检查图标路径（iconPath）是否正确，以及图标文件是否真实存在于指定位置。

进阶用法

• 自定义凸起按钮：可以通过配置 midButton属性来实现一个凸起的中间按钮，常用于发布、扫码等核心操作。
• 完全自定义 TabBar：如果默认的 TabBar 无法满足你的设计需求，你可以将 tabBar中的 "custom": true设置为 true，然后在 App.vue或自定义组件中完全自己编写 TabBar 的样式和交互逻辑。这种方式更灵活，但需要编写更多代码。
• 动态控制：你还可以通过 uni-app 的 API（如 uni.hideTabBar()或 uni.showTabBar()）来动态隐藏或显示底部导航栏。