uni-app移动端底部tab栏简单使用

uni-app移动端底部tab栏简单使用

使用效果
相关效果
代码片段：

"tabBar": {
		"color": "#888888",//字体颜色
		"selectedColor": "#5fafe4",//当前界面文字颜色
		"borderStyle": "black",
		"backgroundColor": "#F9F9F9",//背景颜色
		"list": [{
				"pagePath": "pages/home/shouyie/shouyie",//对应的图片路径
				"text": "首页信息",//文字信息
				"iconPath": "static/image/tabbar/sy.png",//初始显示效果图片
				"selectedIconPath": "static/image/tabbar/syxz.png"//跳转到某界面显示图片路径
			},
			{
				"pagePath": "pages/home/baojing/baojing",
				"text": "报警信息",
				"iconPath": "static/image/tabbar/bj.png",
				"selectedIconPath": "static/image/tabbar/bjxz.png"
			},
			{
				"pagePath": "pages/home/erzhi/erzhi",
				"text": "工作日志",
				"iconPath": "static/image/tabbar/gz.png",
				"selectedIconPath": "static/image/tabbar/gzxz.png"
			},
			{
				"pagePath": "pages/home/my/my",
				"text": "个人信息",
				"iconPath": "static/image/tabbar/me.png",
				"selectedIconPath": "static/image/tabbar/mexz.png"
			}

		]
	},

复制上述代码插入到上图文件中，可以得到上上图效果