Tabs 标签页

概述

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

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "标签页",
  "usingComponents": {
    "fui-tabs": "/components/firstui/fui-tabs/fui-tabs"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-tabs": "components/firstui/fui-tabs/fui-tabs"
  }

代码演示

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

基础使用

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

<fui-tabs tabs="{{tabs}}" bindchange="change"></fui-tabs>

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

滑块与内容同宽

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

<fui-tabs tabs="{{tabs}}" short="{{false}}"></fui-tabs>

超出一屏，禁用 <标签八>

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

<fui-tabs tabs="{{tabs}}" isDot scroll alignLeft></fui-tabs>

//数据格式二：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: '标签九'
}]

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	其他说明
tabs	Array	标签页数据，具体格式见下方详细说明	[ ]	-
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时生效
zIndex	Number, String	标签页z-index值，isFixed或isSticky为true时生效	996	-

//tabs 数据格式说明

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

//数据格式二，以下为约定属性，其他属性可自行增加
tabs: [{
	//（String）标签显示文本（必选）
	name: '标签一',
	//（String）标签显示图标src，图标尺寸默认为 40*40，单位rpx（可选）
	icon: '图标src',
	//（String）当前选项图标src（可选，不传默认使用icon）
	selectedIcon: '当前选项图标src',
	//（Number | String | Boolean）角标，大于0的数或字符串则显示（可选）
	//isDot为true时可传true或false
	badge:0,
	//（Boolean）角标是否显示为圆点（可选）
	isDot:false,
	//（Boolean）是否禁用当前项（可选）
	disabled: true
}]

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;
}

示例预览