uni-app学习笔记3(TabBar)

TabBar就是移动端软件下面的类似选项卡的东西。

一、添加Tabbar

1、在pages.json中添加如下代码

"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
		"list": [{
			"pagePath": "pages/home/homeList",	//界面路径
			"iconPath": "static/image/机具.png",	//默认图标
			"selectedIconPath": "static/image/公益.png",	//选中后的图标
			"text": "主页"	//标题
		},{
			"pagePath": "pages/index/index",
			"iconPath": "static/image/首页.png",
			"selectedIconPath": "static/image/三人.png",
			"text": "首页"
		}, {
			"pagePath": "pages/my/myList",
			"iconPath": "static/image/爱心.png",
			"selectedIconPath": "static/image/彩蛋.png",
			"text": "个人中心"
		}]
	}

 就可以达到最上面展示的效果，切换不同的Tabbar，可以直接跳转到不同的界面。

如果使用其他方式切换Tabbar，则需要

uni.switchTab({
	 url: '/pages/my/myList'
});

地址需要在pages.json中配置。 

二、动态添加Tabbar

研究中。。。。。。