找回密码
 立即注册

QQ登录

只需一步,快速开始

MatrixTian 讲师达人认证 悬赏达人认证

高级会员

141

主题

211

帖子

1380

积分

高级会员

积分
1380

微信认证勋章讲师达人元老葡萄悬赏达人

MatrixTian 讲师达人认证 悬赏达人认证
高级会员   /  发表于:2020-8-25 12:27  /   查看:3166  /  回复:0
本帖最后由 Bella.Yuan 于 2023-1-5 19:10 编辑

在需要将仪表板展示在大屏上并进行自动轮播切换的应用场景,可以在一个屏幕上展示更多的信息,供使用者查看。
在Wyn Enterprise当中,提供了多页面设计场景,并且允许设置多个页面的自动定时轮播切换。

除过可以利用自带多页面页面切换功能,也可以通过自定义切换页面和外部拓展插件切换两种方式实现。

本教程主要介绍三种实现方式:自带轮播切换、使用外部拓展插件切换、自定义页面切换。
其中:
1.自带轮播为整个页面轮播;
2.使用外部拓展插件,可将某个仪表板整体嵌入,做局部轮播;
3.自定义轮播页面,可实现预加载轮播,页面切换更平滑。


1.自带轮播切换
默认情况下,仪表板在预览或运行时需要手动切换页面。如开启自动播放功能后,将会按照指定的时间间隔自动切换页面。
详细属性设置方式参考:仪表板自动播放:https://help.grapecity.com.cn/pages/viewpage.action?pageId=50014120

image.png220489806.png
自动播放示例.gif

2.外部拓展插件
此场景适用于将整个仪表板页面嵌入到轮播区域;可以利用外部拓展插件,将不同仪表板的url添加到外部拓展当中,再参考方式1,设置仪表板页面的自动播放。
2.1获取需要嵌入【外部拓展】的仪表板的URL;
2.2添加【外部拓展】,并绑定URL,url添加&toolbar=hide;
image.png315235900.png
2.3设置【外部拓展】属性,包括标题、内部边距等;
2.4设置仪表板的自动播放属性。
image.png805371703.png

3.自定义轮播页面
实现原理:
获取需要轮播的仪表板的URL(含token),将url设置为iframe的src属性,利用js实现自动定时轮播。
核心代码:
image.png837185363.png

详细代码文件请下载参考。


iframe仪表板轮播.html

2.06 KB, 下载次数: 58

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部