[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多頁導航模式，以本案例為基礎增加功能頁面。