uni-app中的tabbar和condition(三)

1.配置tabbar

如果应用是一个多tab应用，可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页。
Tips

• 当设置position为top时，将不会显示icon
• tabBar中的list是一个数组，只能配置最少2个，最多5个tab，tab按数组的顺序排序。
  属性说明：

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab上的文字默认颜色
selectedColor	HexColor	是		tab上的文字选中时的颜色
backgroundColor	HexColor	是		tab的背景色
borderStyle	String	否	black	tabbar上边框的颜色，仅支持black/white	App 2.3.4+支持其他颜色值
list	Array	是		tab的列表，最少2个，最多5个tab

注意：tabBar与pages与globalStyle同级。
例子：

	"tabBar":{
		"list":[
			{
				"text":"首页",
				"pagePath": "pages/index/index",
				"iconPath":"static/logo.png",
				"selectedIconPath":"static/logo.png"
			},
			{
				"text":"信息",
				"pagePath": "pages/message/message",
				"iconPath":"static/logo.png",
				"selectedIconPath":"static/logo.png"
			},
			{
				"text":"我们",
				"pagePath": "pages/contact/contact",
				"iconPath":"static/logo.png",
				"selectedIconPath":"static/logo.png"
			}
		]
	}

效果图：

tabBar中的属性举例：

		//未选中的文字颜色
		"color":"#DD524D",
		//选中时的文字颜色
		"selectedColor":"#4CD964",
		//背景色
		"backgroundColor":"#F0AD4E",
		//上边框的颜色
		"borderStyle":"black",
		//图标位置(仅支持微信小程序)
		"position":"top",

微信小程序中的效果图：

2.condition启动模式配置

启动模式配置，仅开发期间生效，用于模拟直达页面场景，如：小程序
转发后，用户点击所打开的页面。

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可以页面onLoad函数里获得

例子：

	"condition" : { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "详情页", //模式名称
				"path": "pages/detail/detail", //启动页面，必选
				"query": "id=80" //启动参数，在页面的onLoad函数里面得到
			}
		]
	}

微信小程序的效果图：