什么是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配置演示