全棧工程師之路-中級篇之小程序開發-第二章第六節tabBar詳細說明

首先咱們新建一個界面，還記得新建界面的快捷方式嗎？
在app.json的pages裏面，新增」pages/user/user」
即
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/user/user"
],
ctrl+s保存。小程序在檢測到沒有user目錄的時候，就會自動建立相關的文件。
接下來咱們來配置小程序的tab選擇卡。這個組件是官方支持的，因此咱們只要一點點的配置文件就能夠實現。
咱們在app.json文件中加入tabBar屬性，保存（快捷鍵ctrl+s）
"tabBar":{
"list":[
{
"pagePath":"pages/index/index",
"text":"首頁"
},{
"pagePath": "pages/user/user",
"text": "用戶"
}
]
}

頁面的最下方就出現了tabbar，咱們能夠分別點擊首頁和用戶。咱們看到了界面是有變化的，說明咱們的tab功能已經實現了。
可是咱們的界面有點醜，因此咱們對tab進行美化。
網上有很多方案，這裏咱們採用工做量最低的方式。
阿里巴巴矢量圖標庫
隨便搜索你本身喜歡的圖標點擊下載，再彈出的界面裏編輯須要的顏色，這裏咱們須要兩個狀態，
一個是選中態，一個是常態，因此咱們同一個圖標能夠下載兩種顏色，而後記下這兩種顏色，
下載別的圖標的時候也選擇這兩種顏色，這樣會使咱們的界面看起來更加的和諧。

將文件存放到項目的images文件下。
而後修改tabbar屬性的參數。
"tabBar":{
"color": "#bfbfbf",
"selectedColor":"#1afa29",
"borderStyle":"white",
"backgroungColor":"white",
"list":[
{
"pagePath":"pages/index/index",
"text":"首頁",
"iconPath":"images/movie.png",
"selectedIconPath":"images/movie1.png"
},{
"pagePath": "pages/user/user",
"text": "用戶",
"iconPath": "images/user.png",
"selectedIconPath": "images/user1.png"
}
]
}
經常使用的配置項上面都有了，更詳細的參數能夠查看官方的文檔小程序官方tabBar說明
給連接不如複製粘貼。如下是小程序官方對tabBar的詳細說明。
tabBar
若是咱們的小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄能夠切換頁面），那麼咱們能夠經過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

Tip：

當設置 position 爲 top 時，將不會顯示 icon
tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。

屬性說明：

屬性	類型	必填	默認值	描述
color	HexColor	是		tab 上的文字默認顏色
selectedColor	HexColor	是		tab 上的文字選中時的顏色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上邊框的顏色， 僅支持 black/white
list	Array	是		tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab
position	String	否	bottom	可選值 bottom、top

其中 list 接受一個數組，數組中的每一個項都是一個對象，其屬性值以下：

屬性	類型	必填	說明
pagePath	String	是	頁面路徑，必須在 pages 中先定義
text	String	是	tab 上按鈕文字
iconPath	String	否	圖片路徑，icon 大小限制爲40kb，建議尺寸爲 81px * 81px，當 postion 爲 top 時，此參數無效
selectedIconPath	String	否	選中時的圖片路徑，icon 大小限制爲40kb，建議尺寸爲 81px * 81px ，當 postion 爲 top 時，此參數無效

這節課的內容就到這裏結束了。
感謝您的閱讀。
我是莽夫，但願你開心。
若是你以爲本文對你有幫助，請掃描文末二維碼，支持博主原創。
但願你們關注個人我的公衆號ionic_