---

底部导航配置

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。

参考文档地址：

https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar

测试

pages.json，添加tabBar：

"tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#007AFF",
        "borderStyle": "black",
        "backgroundColor": "#F8F8F8",
        "list": [{
                "pagePath": "pages/index/index",
                "iconPath": "static/component.png",
                "selectedIconPath": "static/componentHL.png",
                "text": "内置组件"
            },
            {
                "pagePath": "pages/list/list",
                "iconPath": "static/api.png",
                "selectedIconPath": "static/apiHL.png",
                "text": "接口"
            }
        ]
    }

这里我们就设置两个页面，index 和list

这里我们方便测试，就使用了之前复制的hello uniapp项目里的图标，可以参照前面小节介绍的阿里图标，下载对应的png图标，进行替换