通知短信+运营短信,5秒速达,支持群发助手一键发送🚀高效触达和通知客户 广告
[TOC] # 底部Tab导航应用 一般一个应用不止一个页面,我们习惯如图所示,在主程序页面按照多页的方式来组织, ![](https://box.kancloud.cn/aad199da214359257c11105175cf4101_332x64.png) ## 页面文件 假设已经增加了两个页面 * [ ] 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多页导航模式,以本案例为基础增加功能页面。