uniapp將底部導(dǎo)航組件化的方法：首先在pages目錄下創(chuàng)建頁(yè)面；然后制作導(dǎo)航圖標(biāo)；最后在【pages.json】文件下配置tabBar。

本教程操作環(huán)境：windows7系統(tǒng)、uni-app2.5.1版本，該方法適用于所有品牌電腦。

推薦（免費(fèi)）：uni-app開發(fā)教程

uniapp將底部導(dǎo)航組件化的方法：

tabBar參數(shù)說明

• color：導(dǎo)航欄字體顏色

• selectedColor：選中后字體的顏色

• backgroundColor：底部背景顏色

• borderStyle：底部的border顏色，只能是“black”或者“white”

• list：對(duì)象，包含以下這些選項(xiàng)

{ pagePath：頁(yè)面路徑 text：底部導(dǎo)航文字 iconPath：沒選中前的圖標(biāo)路徑 selectedIconPath：選中后的圖標(biāo)路徑 }

第一步：在pages目錄下創(chuàng)建頁(yè)面

這是創(chuàng)建的目錄和頁(yè)面名稱（僅供參考）

第二步：制作導(dǎo)航圖標(biāo)

（1）打開阿里巴巴矢量圖標(biāo)庫(kù)（Iconfont）

（2）找到合適的圖標(biāo)加入購(gòu)物車

（3）選擇合適的顏色和格式下載即可

第三步：在pages.json文件下配置tabBar

{       "pages":[             ...       ],       "tabBar": { "color":"#8a8a8a", "selectedColor":"#00aa00", "borderStyle":"black", "backgroundColor":"#ffffff", "list": [ { "pagePath":"pages/index/index", "text":"首頁(yè)", "iconPath":"static/home_normal.png", "selectedIconPath":"static/home.png" }, { "pagePath":"pages/search/search", "text":"發(fā)現(xiàn)", "iconPath":"static/search_normal.png", "selectedIconPath":"static/search.png" }, { "pagePath":"pages/me/me", "text":"我的", "iconPath":"static/me_normal.png", "selectedIconPath":"static/me.png" } ] },       "globalStyle": { ... } }

效果展示

相關(guān)免費(fèi)學(xué)習(xí)推薦：編程視頻