[TOC] # 底部Tab导航应用 一般一个应用不止一个页面，我们习惯如图所示，在主程序页面按照多页的方式来组织，  ## 页面文件 假设已经增加了两个页面 * [ ] pages/home/index * [ ] pages/home/about 我们希望底部通过Tab的形式切换这两个页面。 文件pages/home/index.vue页面水平和垂直居中显示一行文字'Hello'。 pages/home/about页面类似，在页面上简单的显示一行文字。 要增加Tab支持，需要在pages.json文件中增加对tabs的配置，例如 ```html "tabBar": { "color": "#cdcdcd", "selectedColor": "#1296db", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/home/index", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/homeHL.png", "text": "首页" }, { "pagePath": "pages/home/about", "iconPath": "static/tabbar/my.png", "selectedIconPath": "static/tabbar/myHL.png", "text": "关于" }] }, ``` uni-app每个页面支持使用原生title，首页支持使用原生底部tab，这些是要在pages.json里配置，这些并不是vue页面的一部分。 > 根据微信小程序的规范，底部的Tab最多有5个，最少2个。 ## 配置文件 pages.json 项目：02-UniAPP Tabs ```html { //pages数组中第一项表示应用启动页 //参考：https://uniapp.dcloud.io/collocation/pages "pages": [{ "path": "pages/home/index", "style": { "navigationBarTitleText": "Hello world" } }, { "path": "pages/home/about", //重载全局设置 "style": { "navigationBarTitleText": "About" } } ], "globalStyle": { //全局设置 "navigationBarTextStyle": "black", //导航栏文本颜色 "navigationBarTitleText": "uni-app", //导航栏文本默认文字 "navigationBarBackgroundColor": "#F8F8F8", //导航栏背景颜色 "backgroundColor": "#F8F8F8" //页面的背景色 }, "tabBar": { "color": "#cdcdcd", "selectedColor": "#1296db", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/home/index", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/homeHL.png", "text": "首页" }, { "pagePath": "pages/home/about", "iconPath": "static/tabbar/my.png", "selectedIconPath": "static/tabbar/myHL.png", "text": "关于" }] }, "condition": { //模式配置，仅开发期间生效 "current": 0, //当前激活的模式（list 的索引项，从0开始） "list": [{ "name": "首页", //模式名称 "path": "pages/home/index", //启动页面，必选 "query": "" //启动参数，在页面的onLoad函数里面得到。 }, { "name": "关于", //模式名称 "path": "pages/home/about", //启动页面，必选 "query": "" //启动参数，在页面的onLoad函数里面得到。 } ] } } ``` > 以后的项目都是基于Tabs多页导航模式，以本案例为基础增加功能页面。