FVS移动端实现动态显示绝对画布高度

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 应用场景

制作 FVS 移动端模板时，经常会遇到使用参数控件较多的情况，这时候可以对一些不常用、不需要展现出来的的控件进行隐藏，当需要展示的时候再使其展示出来，并且画布高度随展示内容动态变化。如下图所示：

1.2 实现思路

1）为「标题组件」添加点击事件，当点击标题组件时，隐藏或显示指定的其他类型控件。

2）开启移动端布局。

2.1 新建模板

点击设计器左上角「文件>新建可视化看板」，创建一张空白看板，可自定义名称和尺寸，本示例中移动端模板宽度设置为 375 px。如下图所示：

2.2 设计组件

1）点击组件区「文字>标题组件」，添加到画布中，并将其拉动到合适的大小和位置。

设置「标题组件」的标题内容分别为「查看所有参数」和「隐藏所有参数」。如下图所示：

2）点击组件区「控件>下拉框」向画布中添加多个下拉框控件，调整到适当的位置。如下图所示：

3）同时选中所有不需要隐藏的组件，点击画布上方「组合」按钮，选择组合即可将这些组件合并成组。

该组合中的组件大小及布局不受「重布局」影响，即该组合中组件可保持模板画布中布局。如下图所示：

4）同时选中需要隐藏的组件，点击画布上方「组合」按钮，选择组合即可将这些组件合并成组。如下图所示：

5）点击组件区「容器>绝对画布」，将组件添加到画布中。

调整绝对画布大小，设置绝对画布组件边框背景和边框线，使绝对画布的高度在页面中更直观。如下图所示：

6）直接拖拽两个组合到绝对画布上方，出现提示「释放进入绝对画布」，松开鼠标，即可将其拖入绝对画布。调整绝对画布位置，如下图所示：

2.3 添加点击事件

1）为「查看所有参数」组件添加点击事件。选中该组件，点击右侧「交互>点击事件>添加点击事件>显示/隐藏」。如下图所示：

2）为「隐藏所有参数」组件添加点击事件。选中该组件，点击右侧「交互>点击事件>添加点击事件>显示/隐藏」。如下图所示：

2.4 开启移动端布局

1）点击设计器顶部工具栏「模板> FVS 模板设置>移动端」，勾选 开启移动端布局 。如下图所示：

2）切换至移动端，选中绝对画布组件，在右侧「内容>重布局」中勾选「开启手机重布局」，开启重布局后，可设置组件间隙。如下图所示：

2.5 预览效果

预览方式请参考 FVS移动端预览 ，效果如 1.1 节所示。

注：PC 端可以实现显示/隐藏效果，但绝对画布高度不会动态变化。

点击下载模板：FVS移动端实现动态显示绝对画布高度.fvs