uniapp tabbar组件及condition启动模式的配置

tabbar组件

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

• 当设置position为top时 也就是页面的顶部 将不会显示图标icon
• tabBar中的list是一个数组 只能配置最少2个 最多5个tab

在做组件之前需要了解的内容：

color： 必填 tab的文字默认颜色 

selectedColor：必填 tab文字选中时的颜色

backgroundColor：必填 tab的背景色 

borderStyle：选填 tab 上边框的颜色 值只有white和black

position：选填 设置为top时 可选值bottom(默认)和top  top值仅微信小程序支持

以上这些属性都写在tarbar{ 的后面 和数组list同级 颜色统一使用rgb格式 #颜色

第一步 首先需要新建一个vue文件 然后在pages里写上路径

"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "笨蛋app"
			}
		},
		{
			"path": "pages/index/text"   //新建文件
		},
		{
			"path": "pages/index/me"     //新建文件
		}
	]

第二步 在全局配置globalStyle花括号的后面 创建tarbar

//list 是数组
	"tabBar": {
	     "color": "#7A7E83",
	     "selectedColor": "#3cc51f",
	     "borderStyle": "black",
	     "backgroundColor": "#ffffff",
	     "list": [{
	         "pagePath": "pages/index/index",
	         "text": "首页",
			 "iconPath":"static/shouye.png",    //没被选中的图标
			 "selectedIconPath":"static/shouye.png"   //被选中的图标
	    },
		{
	         "pagePath": "pages/index/text",
	         "text": "文本",
			 "iconPath":"static/message.png",
			 "selectedIconPath":"static/message.png"
	    },
		{
			"pagePath": "pages/index/me",
			"text": "我的",
			"iconPath":"static/me.png",
			"selectedIconPath":"static/me.png"
		}
		 ]
	 }
}

当position设置为top时  "position":"top"

condition启动模式的配置

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

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

list说明：

属性	类型	是否必填	描述
name	string	是	启动模式名称
path	string	是	启动模式路径
query	string	否	启动参数

 写在tarbar花括号之后 与tarbar平级

//list 是数组
	"tabBar": {
	     "color": "#7A7E83",
	     "selectedColor": "#3cc51f",
	     "borderStyle": "black",
	     "backgroundColor": "#ffffff",
		 // "position":"top",
	     "list": [{
	         "pagePath": "pages/index/index",
	         "text": "首页",
			 "iconPath":"static/shouye.png",
			 "selectedIconPath":"static/shouye.png"
	    },
		{
	         "pagePath": "pages/index/text",
	         "text": "文本",
			 "iconPath":"static/message.png",
			 "selectedIconPath":"static/message.png"
	    },
		{
			"pagePath": "pages/index/me",
			"text": "我的",
			"iconPath":"static/me.png",
			"selectedIconPath":"static/me.png"
		}
		]
	},
//启动模式配置
	"condition":{
		"current":0,
		"list":[
			{
				"name":"详情页",
				"path":"pages/index/detail"
			}
		]
	}