Tabs 标签页

概述

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

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

温馨提示

一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。

引入

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

第一种：在页面中引用、注册

import fuiTabs from "@/components/firstui/fui-tabs/fui-tabs.vue"
export default {
	components:{
		fuiTabs
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

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

基础使用

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

<fui-tabs :tabs="tabs" @change="change"></fui-tabs>

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

滑块与内容同宽

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

<fui-tabs :tabs="tabs" :short="false"></fui-tabs>

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

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

<!--nvue端，超出一屏滚动时scroll和alignLeft必须同为true-->
<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	标签页数据，具体格式见下方详细说明	[ ]	-
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	标签页字体颜色	#7F7F7F	非Nvue下默认值为空，可通过css变量（--fui-color-subtitle）改变字体颜色
fontWeight	Number, String	标签页选中前字重	normal	-
selectedSize	Number,String	标签页选中后字体大小	32	仅Nvue端生效，非Nvue端使用scale
selectedColor	String	标签页选中后字体颜色	#465CFF	非Nvue下默认值为空，可通过css变量（--fui-color-primary）改变字体颜色
selectedFontWeight	Number, String	标签页选中后字重	500	-
scale	Number, String	标签页选中后字体缩放倍数	1.2	Nvue端暂不支持，使用selectedSize属性代替
badgeColor	String	角标字体颜色	#fff	-
badgeBackground	String	角标背景颜色	#FF2B2B	非Nvue下默认值为空，可通过css变量（--fui-color-danger）改变背景颜色
isDot	Boolean	角标是否显示为圆点	false	-
isSlider V1.3.0+	Boolean	是否显示底部滑块	true	-
sliderHeight	Number, String	滑块高度，单位rpx	5	-
sliderBackground	String	滑块背景颜色	#465CFF	非Nvue下默认值为空，可通过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	H5端默认值为44（默认导航栏的高度）
alignLeft	Boolean	当数据不满一屏时，item项是否靠左对齐，默认均分铺满	false	Nvue端，超出一屏滚动时scroll和alignLeft必须同为true
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	Nvue端不支持，默认越靠后的元素层级越高，即将组件放置最底部

//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
}]

Events

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

特别说明

TIP

非nvue端若部分机型出现滚动条，想隐藏滚动条可通过css的-webkit-scrollbar控制（app-nvue无此css，默认隐藏）。

/* 在全局css，或页面加入以下样式 */
::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
	color: transparent !important;
	display: none;
}

示例预览

示例代码地址

Tabs 标签页