视频Tab

文档基于视频Tabv1.4.5版本

组件说明

视频Tab可围绕主视觉中的视频,动态显示Tab按键并实现各类交互效果。并可设置入场视频、背景视频和出场视频。

效果案例

*视频Tab 效果案例

一、样式

在样式中可以设置组件的基本属性全局样式返回、自动切换事件数据系列

1、基本属性

位置尺寸

位置包括组件的横坐标纵坐标,单位为px;横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度高度,单位为px;可单击比例锁锁定组件宽高比,等比例调整组件的宽高,比例锁默认不锁定。

基本柱状图组件尺寸不影响组件内容显示、组件动画。

*组件位置尺寸说明


默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发,通常用来配合显隐控制,如【选项卡】组件进行显隐切换。


2、全局样式

配置项

说明

视频

支持自主上传入场视频、背景视频和出场视频并设置缩放

支持设置背景视频的透明度

文字

支持文字字号、颜色字体的设置。

英文

支持英文字号、颜色字体的设置。

水平间距

支持设置文字到左侧图标的水平间距。

文字间距

支持设置文字与英文之间的文字间距。

3、返回

设置点击其中一个Tab后,视频Tab组件的样式。

配置项

说明

上传

支持上传图片作为返回按键。(在点击tab后显示,点击图片可返回Tab视频的上一状态)

尺寸

支持设置上传图片的宽。(下面的宽设置的是图片的高)

位置

支持通过X/Y坐标设置图片位置。

4、自动切换事件

设置视频Tab在各个Tab之间的自动切换。

配置项

说明

Tab停留时长

在Tab页面停留的时长,单位为秒,到时间后自动根据顺序触发Tab点击事件。

内容停留时长

触发Tab点击事件后的停留时长,到时间后切换会Tab页面。


5、数据系列

设置视频Tab的数据系列样式,自主添加多个数据系列。

字段

说明

id

数据系列的系列名

开始位置

支持通过X/Y坐标设置Tab动画的起始位置。

结束位置

支持通过X/Y坐标设置Tab动画的结束位置。

圈1

设置Tab最内圈的小圈的颜色、半径与宽度。

圈2

设置Tab中间的小圈的颜色、半径与宽度。

圈3

设置Tab最外圈的小圈的颜色、半径与宽度。


二、数据

组件数据格式

字段

说明

videoTab

相当于数值系列名

name

值,即Tab显示的名字

*组件数据格式说明


JSON数据案例

[
	{
		"videoTab": 1,
		"name": "年龄",
		"english": "age"
	},
	{
		"videoTab": 2,
		"name": "性别",
		"english": "occupation"
	},
	{
		"videoTab": 3,
		"name": "职业",
		"english": "profession"
	}
]


数据配置项说明

配置项

说明

数据源

数据源类型、数据源选择等

数据过滤器

勾选启用数据过滤器,单击添加过滤器,可在设置数据源页面中配置数据过滤器,详情请参见数据过滤器使用说明

数据响应结果

展示数据请求的响应结果

自动更新

选中后可以设置数据请求时间间隔


数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门


三、交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时,则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。


载入动画配置项:

配置项

说明

渐隐渐显

启用是

速率

匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))

方向

动画方向

持续时间

载入动画持续时间,单位为ms

延时

载入动画延时长,单位为ms


回调参数

回调参数即为全局性的参数变量,用于控制组件之间参数的传递,可通过设置回调参数来实现数据驱动交互。

其中,字段值即参数变量,变量名即对字段值的重命名。

详细的回调参数教学👉 回调的使用


Tab交互事件

Tab交互事件可配置点击Tab后所触发的事件动作,设置方式与交互事件相同。

在Tab页位置添加Tab页id值,在点击该id值所指代的Tab选项时触发事件类型(目前只支持“鼠标点击”)。具体事件为:动作+组件。

如下图所示为点击id为1的Tab页时,显示标题组件,关闭方式为手动关闭。

*Tab交互事件案例

Back交互事件

Back交互事件可配置点击返回按键后所触发的事件动作,若未配置返回按键,则默认点击组件中心位置。

如下图所示为点击返回按键,隐藏标题组件。

*Back交互事件案例

自定义事件

自定义事件为「交互事件」的增强模块,支持通过数据驱动组件状态、或变更组件样式配置,也可自定义编辑复杂的条件逻辑;

详细的自定义事件教学👉自定义事件教学

视频教程

此处为语雀视频卡片,点击链接查看:1631798121115.mp4

欢迎您在评论区留下您对该组件的意见,管理员会及时回复您,如长时间未回复欢迎您搜索钉钉群:33782396或者扫描以下二维码添加微信群说出您的想法,采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求:https://jinshuju.net/f/XyCXU0










400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群