跳到主要内容

Tab 栏

适用场景#

用于实现页面的 Tab 栏导航效果

基础能力说明#

通过布局模式属性，可配置多种 Tab 栏样式，支持 icon+文字，或纯 icon、纯文字的样式效果
在标签列表属性中，选中单个标签，可配置标签标题、图标样式、跳转页面等属性
选中页面属性配置哪个页面，则运行态会以选中效果展示该页面对应的标签
高级属性中，提供了多种样式属性，便于调整 Tab 栏的颜色、尺寸等

扩展场景说明#

Tab 栏组件复用到多个页面#

在编辑区选中以配置好标签的 Tab 栏组件，鼠标右击，选择「复制」
编辑器切换到另一个页面，鼠标点击大纲树中的页面节点，win 电脑点击键盘 ctri+c，man 电脑点击键盘 command+c，即可将 Tab 栏组件复制到该页面，再调整组件的「选中页面」属性为当前页面，即可完成复用

属性介绍#

组件接收的外部传入的属性

布局模式	`layoutType`	`{"img":"https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1638935587067_l2004mzar6p5sif6r.svg","label":"icon + 文字","value":"iconText"}\|{"img":"https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1638935581195_mtr3a1pwre8r7wrk9.svg","label":"icon","value":"icon"}\|{"img":"https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1638935581195_avx6a6e1xrxzs38fr.svg","label":"文字","value":"text"}`	基础属性	"iconText"	选择Tab栏组件的布局模式
标签列表	`tabs`	`array`	基础属性	[{"name":"","title":"标签1","iconFont":"td:app"},{"name":"","title":"标签2","iconFont":"td:cart"},{"name":"","title":"标签3","iconFont":"td:user"}]	-
选中页面	`value`	`string`	基础属性	""	若选中页面与Tab中配置的页面相同，则Tab会变为选中状态
路由方式	`routeType`	`{"label":"跳转(navigate)","value":"navigateTo"}\|{"label":"重定向(redirect)","value":"redirectTo"}`	高级属性	"redirectTo"	支持选择到导航与重定向两种跳转方式
位置	`position`	`{"label":"底部","value":"bottom"}\|{"label":"顶部","value":"top"}\|{"label":"当前位置","value":"unset"}`	高级属性	"bottom"	选择Tab栏在页面的布局位置
背景	`backgroundType`	`{"label":"纯色","value":"color"}\|{"label":"图片","value":"image"}`	高级属性	"color"	支持选择颜色背景以及图片背景
背景色	`backgroundColor`	`string`	高级属性	"#FFF"	当选择了颜色背景时可配置，选择Tab栏的背景颜色
背景图	`backgroundImage`	`string`	高级属性	""	当选择了图片背景时可配置，选择Tab栏的背景图片
Tab默认色	`color`	`string`	高级属性	"#444444"	配置Tab图标以及标题的默认颜色，图标颜色修改仅对内置颜色生效
Tab选中色	`activeColor`	`string`	高级属性	"#006EFF"	配置Tab图标以及标题的选中颜色，图标颜色修改仅对内置颜色生效
图标大小	`iconSize`	`number`	高级属性	40	设置Tab图标的尺寸大小

事件介绍#

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

change change 兼容三端 -

适用场景
基础能力说明
扩展场景说明
- Tab 栏组件复用到多个页面
属性介绍
事件介绍