uniapp 實現底部導航欄 - tabBar的使用方法

開發環境：HbuilderX

tabBar參數說明

• color：導航欄字體顏色

• selectedColor：選中后字體的顏色

• backgroundColor：底部背景顏色

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

• list：對象，包含以下這些選項
  {

  pagePath：頁面路徑
  text：底部導航文字
  iconPath：沒選中前的圖標路徑
  selectedIconPath：選中后的圖標路徑
  

  }

第一步：在pages目錄下創建頁面

這是創建的目錄和頁面名稱（僅供參考）

第二步：制作導航圖標

（1）打開阿里巴巴矢量圖標庫（Iconfont）

（2）找到合適的圖標加入購物車

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

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

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

效果展示

到此底部導航欄就已經做好了，趕緊去碼好新添的頁面吧~