大屏轮播时自动跳过空白页

易知微创新技术团队

| 1 天前 6 0 0

预览效果

注：第三页为空白页

实现逻辑

通过自定义事件判断页面中是否有数据，没有数据的话执行更新组件配置动作，设置默认选中项，跳过当前页面。

操作流程

点击左上角【搜索】，在搜索框中输入【选项卡】并添加该组件。添加一个【动态面板】。

3.1 编辑动态面板

双击编辑【动态面板】。添加4个状态，并分别在四个状态中添加【图片】组件。

【状态1】-->【图片】-->【数据】，将所需图片的URL链接粘贴进来。

对状态2、状态4进行同样的操作。状态3为空白页，不添加数据。

分别给四个状态中的【图片】组件添加自定义事件，事件类型选择【当请求完成或数据变化时】，添加自定义条件，匹配动作为【选项卡】—【更新组件配置】。

if(data[0].url==""){  return true}else{  return false}//自定义条件

更新的配置如下图所示（以状态一为例）。状态2、状态3、状态4更新的配置分别为【默认选中】—【3】、【默认选中】—【4】和【默认选中】—【1】。

3.2 选项卡配置

退出动态面板编辑界面，【选项卡】-->【样式】-->【全局】-->【自动轮播】，点击右侧的眼睛按钮，给选项卡开启自动轮播。设置间隔时长为3s。

给【选项卡】组件添加4个自定义事件：

事件一：【事件类型】选择【状态改变】，条件为【s=1】，匹配动作为切换动态变面板状态为状态1；

事件二：【事件类型】选择【状态改变】，条件为【s=2】，匹配动作为切换动态变面板状态为状态2；

事件三：【事件类型】选择【状态改变】，条件为【s=3】，匹配动作为切换动态变面板状态为状态3；

事件四：【事件类型】选择【状态改变】，条件为【s=4】，匹配动作为切换动态变面板状态为状态4。

例：事件一配置

易知微基于多年在数字孪生及数据可视化领域丰富实践，沉淀了诸多经验成果，欢迎大家互相交流学习：

《数字孪生世界白皮书》下载地址：https://easyv.cloud/references/detail/51.html/?t=shequ

《数字孪生行业方案白皮书》下载地址：https://easyv.cloud/references/detail/120.html/?t=shequ

《港口数智化解决方案》下载地址：https://easyv.cloud/references/detail/121.html/?t=shequ

想申请易知微产品免费试用的客户，欢迎点击易知微官网申请试用：https://easyv.cloud/?t=shequ

易知微 自定义事件 大屏轮播时自动跳过空白页 执行更新组件配置动作 易知微产品帮助中心

赞同 0

: 微信

: 链接

全部 0条评论

易知微创新技术团队

145

文章

1.46K

人气

粉丝

关注

关注我们

扫码获取

更多数字孪生可视化干货内容

大屏轮播时自动跳过空白页

分享方式

评论

全部 0条评论

热门文章

关注我们

官方媒体