前端開發~uni-app ·[項目-仿糗事百科] 學習筆記 ·006【底部導航開發】

注：前言、目錄見 https://god-excious.blog.csdn.net/article/details/105312456

【013】底部導航開發

官方文檔 https://uniapp.dcloud.io/collocation/pages?id=tabbar

具體在pages.json文件中的tabBar裏設置

{
	"pages": [ //pages數組中第一項表示應用啓動頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
            "path" : "pages/demo/demo",
            "style" : {}
        }
	    ,{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "仿糗事百科"
			}
		}
        ,{
            "path" : "pages/ceshi/ceshi",
            "style" : {}
        }
        ,{
            "path" : "pages/news/news",
            "style" : {}
        }
        ,{
            "path" : "pages/paper/paper",
            "style" : {}
        }
        ,{
            "path" : "pages/home/home",
            "style" : {}
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "仿糗事百科",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color":"#adadad",         // 導航欄文字默認顏色
		"selectedColor":"#fee42a", // 導航欄選中顏色
		"backgroundColor":"#fff",  // 導航欄背景顏色
		"borderStyle":"white",     // 導航欄邊框樣式
		"list":[                   // tab的列表
			{
				"pagePath":"pages/index/index",                  // 導航欄對應頁面路徑（不用寫.vue）
				"text":"糗事",                                   // 導航欄文字
				"iconPath":"static/tabbar/index.png",           // 導航欄未選中的圖標路徑
				"selectedIconPath":"static/tabbar/indexed.png"  // 導航欄已選中的圖標路徑
			},
			{
				"pagePath":"pages/news/news",
				"text":"動態",
				"iconPath":"static/tabbar/news.png",
				"selectedIconPath":"static/tabbar/newsed.png"
			},
			{
				"pagePath":"pages/paper/paper",
				"text":"小紙條",
				"iconPath":"static/tabbar/paper.png",
				"selectedIconPath":"static/tabbar/papered.png"
			},
			{
				"pagePath":"pages/home/home",
				"text":"我的",
				"iconPath":"static/tabbar/home.png",
				"selectedIconPath":"static/tabbar/homed.png"
			}
		]
	}
}