fs-tab 选项卡

约 1165 字大约 4 分钟

简介

选项卡组件用于在多个内容区域间切换，支持三种风格（text/capsule/segment），可自定义背景、阴影、内间距等，适用于页面分段、筛选等场景。配合 fs-tab-item 可实现横向/纵向排列、图标、角标、禁用等多样用法。

局部引入，在需要引入的页面或组件的 index.json 中配置：

"usingComponents": {
  "fs-tab": "avaui-sub/fs-tab/index",
  "fs-tab-item": "avaui-sub/fs-tab-item/index"
}

PWC（自定义组件/插件）使用：仅 usingComponents 注册方式使用 avaComponent:// 协议，其他用法与局部引入一致。

"usingComponents": {
  "fs-tab": "avaComponent://avaui-sub/fs-tab/index",
  "fs-tab-item": "avaComponent://avaui-sub/fs-tab-item/index"
}

属性	说明	类型	可选值	默认值
value	受控选中值	string/number	—	—
type	选项卡风格	string	text/capsule/segment/outline-capsule	text
tabBackground	背景色/背景样式	string	CSS背景值（颜色/渐变/图片等）	—
hideLine	是否隐藏底部线条	boolean	true/false	false
tabItemLayout	子项布局	string	evenly/auto	auto
tabItemMaxWidth	子项最大宽度	string	—	120px
extStyle	外部自定义样式	string	—	''
showMore	是否显示更多按钮	boolean	true/false	false
moreButton	更多按钮配置	object	见下方说明	{}
items	tab项数据（数组）	array	见下方说明	[]

属性	说明	类型	可选值	默认值
value	选项值	string/number	—	—
checked	是否选中	boolean	true/false	false
disabled	是否禁用	boolean	true/false	false
type	类型	string	text/capsule/segment/outline-capsule	text
icon	图标配置，支持字符串和对象，详见下方说明	String/Object	—	''
badge	徽章配置，支持字符串/数字和对象，详见下方说明	String/Number/Object	—	''
text	文本内容	string	—	''
extStyle	外部自定义样式	string	—	''
tapId	点击标识	string	—	''

tapId 说明：fs-tab 组件会自动为每个 fs-tab-item 设置 tapId，命名规则为 tab-item-{index}（index 从 0 开始）。开发者也可以手动设置 tapId 来覆盖自动生成的标识。

更多图标配置选项请参考 fs-icon组件文档

属性名	类型	默认值	说明
content	String/Number	''	徽章内容，支持数字和文字
max	Number	99	最大显示数字，超过显示为 max+
type	String	'filled'	徽章类型：filled(填充胶囊) / outlined(边框圆形)
color	String	'#ff4444'	徽章颜色
dot	Boolean	false	是否显示小红点
offset	Array	null	设置徽章的位置偏移，示例：[-10, 20] 或 ['10rpx', '8rpx']
contentStyle	String	''	徽章内容的自定义样式

更多徽章配置选项请参考 fs-badge组件文档

moreButton 对象用于配置更多按钮的行为和样式：

事件名	说明	回调参数
change	切换时触发
moreClick	点击更多按钮
ready	组件初始化完成时触发	无
scrollEnd	滚动结束时触发	{ visibleIndexes }，visibleIndexes为所有在可视区域内的item索引数组

事件名	说明	回调参数
change	点击时触发

组件	名称	说明
fs-tab	默认	tab-item列表
fs-tab-item	默认	选项内容