# Tabs 标签页 V1.1.0+

概述

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

温馨提示

使用该组件需要同时引入 fui-types 类型文件。

# 支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

# 引入

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

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

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

1
2
3
4
5
6

第二种：easycom组件规范

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

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

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

# 代码演示

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

基础使用

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

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

import { FuiTabsItemParam } from '@/components/firstui/fui-types/index.uts'
export default {
	data() {
		return {
			tabs: [{
				name: '热门推荐'
			}, {
				name: '新时代'
			}, {
				name: '懂球帝'
			}] as FuiTabsItemParam[]
		}
	},
	methods: {
		change(e : FuiTabsItemParam) {
			console.log(JSON.stringify(e))
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

滑块与内容同宽

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

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

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

通过 tabs 属性设置标签页数据，isDot 属性设置角标是否显示为圆点，scroll 属性设置是否可以滚动。

<fui-tabs :tabs="tabs2" :isDot="true" :scroll="true"></fui-tabs>

import { FuiTabsItemParam } from '@/components/firstui/fui-types/index.uts'
export default {
	data() {
		return {
			tabs2: [{
				name: '标签一'
			}, {
				name: '标签二'
			}, {
				name: '标签三',
				badge: 1
			}, {
				name: '标签四'
			}, {
				name: '标签五'
			}, {
				name: '标签六'
			}, {
				name: '标签七'
			}, {
				name: '标签八',
				disabled: true
			}, {
				name: '标签九'
			}] as FuiTabsItemParam[]
		}
	}
}

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
27
28

# Slots

插槽名称	说明
-	-

# Props

属性名	类型	说明	默认值	平台差异说明
tabs	Array<FuiTabsItemParam>	标签页数据，具体格式见下方详细说明	[ ]	-
current	Number	当前选项卡索引	0	-
scroll	Boolean	标签页超出一屏是否可以滚动	false	-
height	Number	标签页高度，单位rpx	96	-
background	String	标签页背景色	#fff	-
size	Number	标签页字体大小	28	-
color	String	标签页字体颜色	#7F7F7F	-
fontWeight	String	标签页选中前字重	normal	-
selectedSize	Number	标签页选中后字体大小	32	-
selectedColor	String	标签页选中后字体颜色	#465CFF	-
selectedFontWeight	String	标签页选中后字重	bold	-
scale	Number	标签页选中后字体缩放倍数	1.2	-
badgeColor	String	角标字体颜色	#fff	-
badgeBackground	String	角标背景颜色	#FF2B2B	-
isDot	Boolean	角标是否显示为圆点	false	-
isSlider	Boolean	是否显示底部滑块	true	-
sliderHeight	Number	滑块高度，单位rpx	5	-
sliderBackground	String	滑块背景颜色	#465CFF	-
sliderRadius	Number	滑块圆角值，单位rpx。值为-1时则使用滑块高度值	-1	-
padding	Number	滑块左右padding值，单位rpx	0	-
bottom	Number	滑块左右bottom值，单位rpx	0	-
short	Boolean	滑块是否固定为较短的长度45rpx	true	-
center	Boolean	滑块是否居中显示，默认居左显示	false	-
isFixed	Boolean	标签页是否固定在顶部	false	-
top	Number	isFixed为true时，标签页top值，单位px	0	-
direction	Boolean	tabs item项内容排列方式，可选值：row、column。当设置为column时需调整height值	row	-
zIndex	Number	标签页z-index值，isFixed为true时生效	900	-

# FuiTabsItemParam

/**
* fui-tabs 标签页 组件props 属性 tabs 参数类型
* @description props 属性 tabs（item项） 参数类型
* @param {string} name {string} 标签显示文本，必选
* @param {string} src {string} 标签显示图标，图标尺寸默认为 40*40，单位rpx，可选
* @param {string} selectedIcon {string} 当前选项图标src，可选，不传默认使用icon
* @param {number} badge {number} 角标数值，可选
* @param {boolean} isDot {boolean} 角标是否显示为圆点，可选
* @param {boolean} disabled {boolean} 是否禁用当前项，可选
* @param {number} index {number} 当前点击项索引值，change 事件返回，无需传值，可选
*/
export type FuiTabsItemParam = {
	name : string;
	icon ?: string;
	selectedIcon ?: string;
	badge ?: number;
	isDot ?: boolean;
	disabled ?: boolean;
	index ?: number;
}

/*页面引入*/
import { FuiTabsItemParam } from '@/components/firstui/fui-types/index.uts'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Events

事件名	类型	说明	回调参数
@change	(event: FuiTabsItemParam) => void	标签页切换时触发	FuiTabsItemParam

# FuiTabsItemParam

同上。

示例预览

# 示例代码地址

Tabs 标签页

← BottomNavbar 底部导航栏 IndexList 索引列表 →