大屏多页面跳转新策略：揭秘母版与Tab选项的高效运用

做可视化页面的时候，往往需要实现多个页面的跳转导航，这个是在做基础页面构建的时候的基础思考，那么导航的配置如果需要再多个页面中保持一致，那么母版+tab按钮导航 ，是不错的配置方案。

什么是母版

大屏设计母版是在大屏设计器中，用于在多个页面中展示相同的内容模版，且在各个页面中处于底层的展示，母版的作用

1、统一性与标准化

内容一致性：母版作为通用组件，可以在不同的页面中使用，并保持组件内容、样式、位置的一致性。这意味着，一旦在母版中做了修改，所有引用该母版的页面都会同步更新，极大地提高了设计效率和一致性。

标准化设计：通过母版，设计者可以确保大屏中重复出现的元素（如标题栏、底部导航栏等）具有统一的格式和风格，从而增强整体设计的专业性和美观性。

2、提高设计效率

快速复用：在拖拽式配置的大屏设计器中，设计者可以轻松地通过拖拽操作将母版应用到多个页面中，无需在每个页面中重复创建相同的元素。这不仅节省了大量时间，还减少了因手动复制粘贴可能导致的错误。

集中管理：所有的母版都可以在设计器的母版管理区域进行集中管理，便于设计者对全局元素进行统一修改和维护。这种集中管理的方式使得设计工作更加有序和高效。

3、增强交互性

触发事件：在拖拽式配置的大屏设计器中，母版还支持触发事件的设置。这意味着，母版内的元素可以与页面上的其他元素进行交互，实现更复杂的动态效果。例如，点击母版中的某个按钮，可以触发页面上其他元素的显示或隐藏。

交互封装：通过将交互封装在母版内，设计者可以更容易地在多个页面之间共享和重用这些交互逻辑，进一步提高了设计效率和灵活性。

4、优化性能和体验

减少文件大小：对于包含大量相同元素的页面，通过使用母版可以减少文件大小，因为重复的元素只需在母版中存储一次。这有助于提升大屏的加载速度和运行性能。

提升用户体验：统一且美观的设计元素可以提升大屏的整体视觉效果和用户体验。用户在使用大屏时，可以更容易地识别和理解页面上的各种元素和功能。

tab选项卡

在可视化配置大屏设计器中，Tab选项卡是一种重要的用户界面组件，用于实现数据的分块展示和快速切换。它允许用户在不同的选项卡或标签之间切换，以浏览和操作不同的数据集合。以下是Tab选项卡在可视化配置大屏设计器中的几个关键点：

1. 功能与用途

数据分块展示：Tab选项卡将大量数据分成多个小块，每个Tab标签页下展示一部分数据，避免了数据过多导致的界面混乱和性能问题。

快速切换：用户可以通过点击Tab标签快速切换不同的数据视图，提高数据处理和分析的效率。

增强用户体验：通过清晰的标签和直观的界面布局，Tab选项卡帮助用户更快地找到所需信息，提升用户体验。

2. 自定义与配置

标签样式：Tab选项卡支持自定义Tab的颜色、数量、类型以及标签样式等，以满足不同场景下的需求。

动画效果：部分设计器允许为Tab选项卡的切换添加动画效果，如渐变、缩放等，提升交互的流畅性和视觉吸引力。

数据绑定：Tab选项卡可以与其他组件配合使用，通过数据绑定实现数据的动态更新和交互展示。

3. 性能与优化

数据加载与渲染：为了确保大屏选项卡的性能和响应速度，需要对数据加载和渲染过程进行优化，如采用异步加载技术、缓存机制等手段。

实时更新：Tab选项卡可以展示实时更新的数据，通过WebSocket或其他实时通信协议实现服务器和客户端之间的实时数据推送。

4. 应用场景

数据可视化大屏：在数据可视化大屏中，Tab选项卡常用于展示不同维度的数据视图，如销售总览、地区分析、产品分类等。

多屏仪表板：在需要同时展示多个仪表板的大屏应用中，Tab选项卡可以通过轮播功能实现不同仪表板的自动轮播展示。

5. 设计原则

简洁明了：Tab标签的文案应当简短且高效，避免过长或复杂的描述。

突出选中状态：已选中的Tab标签应当足够突出，以便用户一目了然地知道当前选中了哪个选项卡。

一致性：在整个大屏设计中，Tab选项卡的风格、颜色、字体等应保持一致，以维护界面的统一性和协调性。

页面跳转

实现页面的跳转配置，选择对应的选项

设置选项触发的行为，设置行为类型为，为跳转画布，并且设定好跳转到哪个页面上，这样快速实现通过母版配置跳转导航。

在线demo：http://bi.bctools.cn

***************************************************