FirstUI UNI版

Vtabs 纵向选项卡 VIP专属 V1.5.0+

概述

Vtabs 纵向选项卡，用于让用户在不同的视图中进行切换。
Vtabs 提供了 fui-vtabs 和 fui-vtabs-content 两个组件来进行布局。

# 支持平台

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

# 引入

以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiVtabs from "@/components/firstui/fui-vtabs/fui-vtabs.vue"
export default {
	components:{
		fuiVtabs
	}
}
1
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

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

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

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。
选项卡-联动

通过 vtabs 属性设置选项卡数据，activeTab 属性设置默认选中项。

<fui-vtabs :vtabs="vtabs" :activeTab="activeTab"  ref="vtabs" @click="onTabClick" @change="onChange">
	<!--注意：联动时，tabIndex属性为必传参数-->
	<fui-vtabs-content v-for="(item,index) in vtabs" :key="index" :tabIndex="index">
		<view class="fui-vtabs-content__item" :style="{paddingBottom:vtabs.length-1===index?'800px':'0'}">
			<view class="fui-content--box">
				<text class="fui-title">{{item.title || item.name}}</text>
				<image class="fui-img" :src="resUrl+item.img" mode="widthFix"></image>
				<text class="fui-descr">{{item.descr}}</text>
			</view>
		</view>
	</fui-vtabs-content>
</fui-vtabs>
1
2
3
4
5
6
7
8
9
10
11
12
export default {
	data() {
		return {
			vtabs: [],
			activeTab: 0,
			resUrl: this.fui.resUrl()
		}
	},
	onLoad() {
		//内容可与tabs分开
		const tabs = [{
				name: 'First UI',
				icon: '/static/images/common/logo.png',
				title: 'FirstUI组件库',
				img: '/cooperate/light/img_banner_3x.png',
				descr: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！'
			},
			{
				name: '快速上手',
				img: '/cooperate/dark/img_banner_3x.png',
				descr: '使用 First UI前，请确保你已经学习并熟练使用过 uni-app 或者 微信小程序 。文档详见：https://doc.firstui.cn/docs/started.html。'
			},
			{
				name: '更新日志',
				img: '/cooperate/light/img_banner_3x.png',
				descr: 'First UI 严格遵循 Semantic Versioning 2.0.0语义化版本规范。更新日志详见：https://doc.firstui.cn/docs/log.html。',
				badge: 1
			},
			{
				name: '升级指南',
				img: '/cooperate/dark/img_banner_3x.png',
				descr: 'First UI 升级指南，当含有破坏性更新，不向下兼容的版本升级时，会在这里写入相关的升级指导。'
			},
			{
				name: '设计规范',
				img: '/cooperate/light/img_banner_3x.png',
				descr: '为了约束和成就更多优秀的产品，打造优质的体验，我们拟定了一些UI界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在First UI生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与First UI的共赢。'
			},
			{
				name: '自定义主题',
				img: '/cooperate/dark/img_banner_3x.png',
				descr: 'First UI 默认提供了一套主题，并使用 CSS 变量 来实现定制主题，链接中的内容可以帮助你对 CSS 变量 概念有基本的认识，避免许多不必要的困扰。文档详见：https://doc.firstui.cn/docs/theme.html。'
			},
			{
				name: 'FAQ',
				img: '/cooperate/light/img_banner_3x.png',
				descr: '常见问题解答，使用前请先仔细阅读FAQ内容，了解常见问题，避免在后续使用过程中花费更多时间。详见：https://doc.firstui.cn/docs/FAQ.html。'
			}
		]

		this.vtabs = tabs
		//数据加载完成后，调用方法重新计算内容高度，防止联动错乱
		this.$nextTick(() => {
			setTimeout(() => {
				this.$refs.vtabs.reset()
			}, 200)
		})
	},
	methods: {
		onTabClick(e) {
			const index = e.index
			// console.log('tabClick', index)
		},
		onChange(e) {
			const index = e.index
			// console.log('change', index)
		}
	}
}
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
page {
	background: #fff;
	font-weight: normal;
}

.fui-vtabs-content__item {
	width: 100%;
	/* padding: 0 20rpx; */
	box-sizing: border-box;
	overflow: hidden;
}

.fui-img {
	width: 100%;
	height: 268rpx;
	display: block;
	margin-top: 24rpx;
}

.fui-content--box {
	width: 100%;
	padding: 30rpx 24rpx 40rpx;
	box-sizing: border-box;
}

.fui-title {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
}

.fui-descr {
	display: block;
	font-size: 24rpx;
	padding-top: 24rpx;
}
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
29
30
31
32
33
34
35
36

# Slots

# fui-vtabs 组件

插槽名称 说明
default 选项卡数据，由多个 fui-vtabs-content 组件组成

# fui-vtabs-content 组件

插槽名称 说明
default 选项卡数据内容

# Props

# fui-vtabs 组件

属性名 类型 说明 默认值 平台差异说明
vtabs Array 选项卡数据，具体格式见下方详细说明 [ ] -
width Number, String 选项卡宽度，为0时默认使用屏幕宽度，注：传值时自行加上单位,如：750rpx '0' -
height Number, String 选项卡高度，为0时默认使用屏幕高度，注：传值时自行加上单位,如：600rpx '0' -
tabWidth Number, String 选项卡菜单item项宽度，单位rpx 220 -
tabHeight Number, String 选项卡菜单item项高度，单位rpx 110 -
size Number, String 选项卡菜单item项字体大小，单位rpx 26 -
activeSize Number, String 选项卡菜单item项选中时字体大小，单位rpx 26 -
color String 选项卡菜单item项字体颜色 #333333 -
activeColor String 选项卡菜单item项选中时字体颜色 #465CFF 非Nvue端默认为空，可使用css变量（--fui-color-primary）改变颜色
fontWeight Number, String 选项卡菜单item项字重 normal -
activeFontWeight Number, String 选项卡菜单item项选中时字重 normal -
background String 选项卡菜单item项背景色 #eeeeee -
activeBgColor String 选项卡菜单item项选中时背景色 #ffffff -
isBorder Boolean 是否显示选项卡菜单item项左侧边框 true -
borderColor String 示选项卡菜单item项选中时左侧边框颜色 #465CFF 非Nvue端默认为空，可使用css变量（--fui-color-primary）改变颜色
activeTab Number, String 初始化显示tab项索引 0 -
animation Boolean 选项卡联动时内容滚动是否有动画效果 true -
badgeColor String 选项卡菜单item项角标字体颜色 #fff -
badgeBackground String 选项卡菜单item项角标背景颜色 #FF2B2B 非Nvue端默认为空，可使用css变量（--fui-color-danger）改变颜色
isDot Boolean 角标是否显示为圆点，vtabs 中 badge数值大于0时才会显示 false -
linkage Boolean 是否联动，为false时content只需展示对应索引数据 true -

# fui-vtabs-content 组件

属性名 类型 说明 默认值 平台差异说明
tabIndex Number, String 当前内容所在选项卡索引值，联动时必传 0 -
//vtabs 选项卡数据属性说明，以下属性为约定属性，可自行新增其他属性

[{
	//选项卡item项文本
	name: 'First UI',
	//选项卡item项图标地址，可选
	icon: '/static/images/common/logo.png',
	//选项卡item项选中时图标地址，可选
	activeIcon:'',
	//选项卡item项图标宽度，单位rpx，可选
	iconWidth:40,
	//选项卡item项图标高度，单位rpx，可选
	iconHeight:40,
	//选项卡item项角标，数值大于0才会显示，可选
	badge: 0,
	//选项卡item项是否禁用点击，可选
	disable:false
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Events

# fui-vtabs 组件

事件名 说明 回调参数
@click 点击选项卡时触发 {
  index:当前选项卡索引
  ...vtabs[index]:当前索引下数据
}
@change 滚动内容时触发，联动时有效 {
  index:当前选项卡索引
  ...vtabs[index]:当前索引下数据
}

示例预览

# 示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

# 特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)

Last Updated: 8/18/2023, 5:05:05 PM

← Link 超链接 →