uni-app学习日记day2-----配置tabbar和顶部导航栏

绝大部分的项目都需要tabbar，tabbar就是我们进入小程序或者app后看到的底部导航栏。uniapp设置tabbar的格式和微信小程序基本一样。
我们首先在pages文件夹中，新建三个页面，因为我们一会儿要设置4个tabbar，页面要提前注册好。

我们然后进去pages.json，在pages属性下，把刚才新建的三个页面注册一下，并且写一下他们的顶部导航栏的文字

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页"
		}
	},
	{
		"path":"pages/classify/classify",
		"style": {
			"navigationBarTitleText": "分类"
		}
	},
	{
		"path":"pages/shoppingCar/shoppingCar",
		"style": {
			"navigationBarTitleText": "购物车"
		}
	
	},
	{
		"path":"pages/me/me",
		"style": {
			"navigationBarTitleText": "个人中心"
		}
	}
],

然后写一个和globalStyle同级的属性，tabbar，记得写双引号，然后写一个list属性，list里存放的就是tabbar页面的相关信息。
我们首先先找一些底部导航栏相关的logo放到项目里的一个文件夹里，我放到了static里面。

"tabBar":{
	"list":[
		{
			"iconPath":"static/home.png",
			"selectedIconPath":"static/home_fill.png",
			"pagePath":"pages/index/index",
			"text":"首页"
		
		},
		{
			"iconPath":"static/classify.png",
			"selectedIconPath":"static/classify_fill.png",
			"pagePath":"pages/classify/classify",
			"text":"分类"
		},
		{
			"iconPath":"static/shopping.png",
			"selectedIconPath":"static/shopping_fill.png",
			"pagePath":"pages/shoppingCar/shoppingCar",
			"text":"购物车"
		},
		{
			"iconPath":"static/me.png",
			"selectedIconPath":"static/me_fill.png",
			"pagePath":"pages/me/me",
			"text":"个人中心"
		}
	],
	"color":"#333333",
	"selectedColor":"#4CD964"
}

list数组里面的每个{}包住的都是一个页面的信息，iconPath是未被选中的tabbar的logo，selectIconPath是选中后的tabbar的logo，pagePath是页面的路径，text是tabbar显示的文字。list数组外的color和selectColor顾名思义就是tabbar未被选中的文字颜色和选中后的文字颜色。
和微信小程序的几乎是一模一样。
然后我们在H5端运行一下项目：

一点问题没有，灰常的nice。