uni-app学习:2、tabBar使用

uni-app学习:2、tabBar使用

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
list Array   tab 的列表,详见 list 属性说明,最少2个、最多5 tab
position String  bottom 可选值 bottomtop

其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:

pagePath String  页面路径,必须在 pages 中先定义
text String  tab 上按钮文字
iconPath String  图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion  top 时,此参数无效,不支持网络图片
selectedIconPath String  选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion  top 时,此参数无效

 

实际测试

目录

page.json设置

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		}, {
			"path": "pages/leibie/leibie",
			"style": {
				"navigationBarTitleText": "分类"
			}
		}, {
			"path": "pages/wode/wode",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/image/d2.png",
			"selectedIconPath": "static/image/d2-2.png",
			"text": "首页"
		}, {
			"pagePath": "pages/leibie/leibie",
			"iconPath": "static/image/d1.png",
			"selectedIconPath": "static/image/d1-1.png",
			"text": "分类"
		}, {
			"pagePath": "pages/wode/wode",
			"iconPath": "static/image/d4.png",
			"selectedIconPath": "static/image/d4-4.png",
			"text": "我的"
		}]
	},
	"condition": { //模式配置,仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [{
			"name": "", //模式名称
			"path": "", //启动页面,必选
			"query": "" //启动参数,在页面的onLoad函数里面得到
		}]
	}
}

运行结果