tabBar介绍以及配置

什么是tabBar? tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换,小程序中 分为 ·底部tabBar ·顶部tabBar 【注意】tabBar 中只能配置

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

相关推荐