跳到主要内容

Tab 栏

适用场景#

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

基础能力说明#

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

扩展场景说明#

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

  1. 在编辑区选中以配置好标签的 Tab 栏组件,鼠标右击,选择「复制」
  2. 编辑器切换到另一个页面,鼠标点击大纲树中的页面节点,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栏组件的布局模式
标签列表tabsarray基础属性[{"name":"","title":"标签1","iconFont":"td:app"},{"name":"","title":"标签2","iconFont":"td:cart"},{"name":"","title":"标签3","iconFont":"td:user"}]-
选中页面valuestring基础属性""若选中页面与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"支持选择颜色背景以及图片背景
背景色backgroundColorstring高级属性"#FFF"当选择了颜色背景时可配置,选择Tab栏的背景颜色
背景图backgroundImagestring高级属性""当选择了图片背景时可配置,选择Tab栏的背景图片
Tab默认色colorstring高级属性"#444444"配置Tab图标以及标题的默认颜色,图标颜色修改仅对内置颜色生效
Tab选中色activeColorstring高级属性"#006EFF"配置Tab图标以及标题的选中颜色,图标颜色修改仅对内置颜色生效
图标大小iconSizenumber高级属性40设置Tab图标的尺寸大小

事件介绍#

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

事件名
事件code
事件出参 event.detail
适用情况
说明
changechange兼容三端-