【仪表板-外观美化】多页面或多个仪表版自动切换的三种实现方式

收藏

本帖最后由 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

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

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

		自动登录	找回密码
密码			立即注册

【仪表板-外观美化】多页面或多个仪表版自动切换的三种实现方式

0 个回复

微信认证勋章

讲师达人

元老葡萄

悬赏达人