# Tabs 标签页

概述

Tabs 标签页,分隔内容上有关联但属于不同类别的数据集合。

# 引入

以下介绍两种常用的引入方式。
第一种:在页面json文件中引入
{
  "navigationBarTitleText": "标签页",
  "usingComponents": {
    "fui-tabs": "/components/firstui/fui-tabs/fui-tabs"
  }
}
1
2
3
4
5
6
第二种:在根目录app.json文件中全局引入
"usingComponents": {
    "fui-tabs": "components/firstui/fui-tabs/fui-tabs"
  }
1
2
3

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基础使用

通过 tabs 属性设置标签页数据,change 为标签页切换事件。

<fui-tabs tabs="{{tabs}}" bindchange="change"></fui-tabs>
1
//数据格式一
tabs: ['热门推荐', '新时代', '懂球帝']
1
2
滑块与内容同宽

通过 short 属性设置值为false即可让滑块与内容同宽,默认滑块宽度为固定值45rpx。

<fui-tabs tabs="{{tabs}}" short="{{false}}"></fui-tabs>
1
超出一屏,禁用 <标签八>

通过 tabs 属性设置标签页数据,isDot 属性设置角标是否显示为圆点,scroll 属性设置是否可以滚动,alignLeft 属性设置当数据不满一屏时,item项是否靠左对齐,默认均分铺满。

<fui-tabs tabs="{{tabs}}" isDot scroll alignLeft></fui-tabs>
1
//数据格式二:name(必选)、badge(可选)、disabled(可选)为约定属性,其他属性可自行定义
tabs: [{
	//标签显示文本(String)
	name: '标签一'
}, {
	name: '标签二'
}, {
	name: '标签三',
	//角标(Number | String | Boolean),大于0的数或字符串则显示
	//isDot为true时可传true或false
	badge: 1
}, {
	name: '标签四'
}, {
	name: '标签五'
}, {
	name: '标签六'
}, {
	name: '标签七'
}, {
	name: '标签八',
	//是否禁用当前项(Boolean)
	disabled: true
}, {
	name: '标签九'
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# Slots

插槽名称 说明
- -

# Props

属性名 类型 说明 默认值 其他说明
tabs Array 标签页数据,具体格式见下方详细说明 [ ] -
nameKey V2.4.0+ String tabs数据中 name 值指定的key name -
badgeKey V2.4.0+ String tabs数据中 badge 值指定的key badge -
disabledKey V2.4.0+ String tabs数据中 disabled 值指定的key disabled -
current Number 当前选项卡索引 0 -
scroll Boolean 标签页超出一屏是否可以滚动 false -
height Number,String 标签页高度,单位rpx 96 -
background String 标签页背景色 #fff -
size Number,String 标签页字体大小 28 -
color String 标签页字体颜色 - 如果值为空,可通过css变量(--fui-color-subtitle)改变字体颜色
fontWeight Number, String 标签页选中前字重 normal -
selectedColor String 标签页选中后字体颜色 - 如果值为空,可通过css变量(--fui-color-primary)改变字体颜色
selectedFontWeight Number, String 标签页选中后字重 500 -
scale Number, String 标签页选中后字体缩放倍数 1.2 -
badgeColor String 角标字体颜色 #fff -
badgeBackground String 角标背景颜色 - 如果值为空,可通过css变量(--fui-color-danger)改变背景颜色
isDot Boolean 角标是否显示为圆点 false -
isSlider V1.3.0 Boolean 是否显示底部滑块 true -
sliderHeight Number, String 滑块高度,单位rpx 5 -
sliderBackground String 滑块背景颜色 - 如果值为空,可通过css变量(--fui-color-primary)改变背景颜色
sliderRadius Number, String 滑块圆角值,单位rpx。值为-1时则使用滑块高度值 -1 -
padding Number, String 滑块左右padding值,单位rpx 0 -
bottom Number, String 滑块左右bottom值,单位rpx 0 -
short Boolean 滑块是否固定为较短的长度45rpx true -
center V1.9.0+ Boolean 滑块是否居中显示,默认居左显示 false -
isFixed Boolean 标签页是否固定在顶部 false -
isSticky Boolean 标签页吸顶效果,为true时isFixed失效 false -
top Number, String isFixed或isSticky为true时,标签页top值,单位px 0 -
alignLeft Boolean 当数据不满一屏时,item项是否靠左对齐,默认均分铺满 false -
direction Boolean tabs item项内容排列方式,可选值:row、column。当设置为column时需调整height值 row 有icon时生效
itemPadding V2.4.0+ Number, String item项左右padding值,单位rpx 32 -
zIndex Number, String 标签页z-index值,isFixed或isSticky为true时生效 996 -
//tabs 数据格式说明

//数据格式一,字符串数组
tabs: ['热门推荐', '新时代', '懂球帝']

//数据格式二,以下为约定属性,其他属性可自行增加
tabs: [{
	//(String)标签显示文本,可使用 nameKey 属性指定key(必选)
	name: '标签一',
	//(String)标签显示图标src,图标尺寸默认为 40*40,单位rpx(可选)
	icon: '图标src',
	//(String)当前选项图标src(可选,不传默认使用icon)
	selectedIcon: '当前选项图标src',
	//(Number | String | Boolean)角标,大于0的数或字符串则显示(可选)
	//isDot为true时可传true或false
	badge:0,
	//(Boolean)是否禁用当前项(可选)
	disabled: true
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Events

事件名 说明 回调参数
bind:change 标签页切换时触发 event.detail =
{
  index:当前标签页索引
  ...tabs[index]:当前索引下标签页数据
}

# 特别说明

TIP

若部分机型出现滚动条,想隐藏滚动条可通过css的-webkit-scrollbar控制。

/* 在全局css,或页面加入以下样式 */
::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
	color: transparent !important;
	display: none;
}
1
2
3
4
5
6
7

示例预览

Last Updated: 5/30/2024, 10:36:22 AM