# 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
	}
}
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>
1
//数据格式一
tabs: ['热门推荐', '新时代', '懂球帝']
1
2
滑块与内容同宽

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

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

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

<!--nvue端,超出一屏滚动时scroll和alignLeft必须同为true-->
<fui-tabs :tabs="tabs" isDot scroll alignLeft></fui-tabs>
1
2
//数据格式二: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 标签页数据,具体格式见下方详细说明 [ ] -
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 -
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时生效
zIndex Number, String 标签页z-index值,isFixed或isSticky为true时生效 996 Nvue端不支持,默认越靠后的元素层级越高,即将组件放置最底部
//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
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Events

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

示例预览

# 示例代码地址

FirstUITabs 标签页
Last Updated: 9/29/2022, 1:07:59 AM