视频Tab
文档基于视频Tabv1.4.4版本
组件说明
视频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交互事件案例
自定义事件
自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；
详细的自定义事件教学👉自定义事件教学
视频教程
欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群说出您的想法，采纳后将送出定制礼品。
也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0