tabBar介绍以及配置

什么是tabBar?

　　tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换，小程序中 分为 

　　　　·底部tabBar

　　　　·顶部tabBar

　　【注意】tabBar 中只能配置最少2个，最多5个tab签页； 当渲染顶部tabBar 时 ，不显示icon 图标，只显示文本；

 

　　tabBar的六个组成部分

　　　　1、backgroundColor ：tabBar 的背景颜色

　　　　2、selectedIconPath ：选中时候的icon 路径

　　　　3、borderStyle ： tabBar 上边框的颜色

　　　　4、iconPath ：未选中时候的icon 路径

　　　　5、selectedColor ：tabBar 选中时候文字的颜色

　　　　6、color ：tabBar 文字未选中（默认）的颜色

 

配置tabBar 常见属性

属性	类型	必填	默认值	描述
position	String	否	bottom	tab的位置，top / bottom
borderStyle	String	否	black	tbaBar 上边框的颜色 black / white
color	HeColor	否		tabBar未选中文字颜色
selectedColor	HeColor	否		tabBar 选中时候文字的颜色
backgroundColor	HeColor	否		tabBar 的背景颜色
list	Array	是		tab标签页列表，最少2个，最多5个tab签页

 

每个tabBar 页面的属性配置项（即上面list 里面每个对象有哪些属性）

属性	类型	必填	描述
pagePath	String	是	页面的路径，【注意】页面必须先在pages中预先定义
text	String	是	tabBar 显示的文字
iconPath	String	否	未选中时候的icon 路径，当tabBar的position属性为top 时候 不显示icon
selectedIconPath	String	否	选中时候的icon 路径，当tabBar的position属性为top 时候 不显示icon

 

　　点击前往tabBar配置演示