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_页面1。如下图所示：

2）為「隱藏所有參數」組件新增點選事件。選中該組件，點選右側「交互>點選事件>新增點選事件>顯示/隱藏」。如下圖所示：

2.4 開啟行動端佈局

1）點選設計器頂部工具欄「範本> FVS 範本設定>行動端」，勾選「開啟行動端佈局」。如下圖所示：

2）切換至行動端，選中絕對畫布組件，在右側「內容>重佈局」中勾選「開啟手機重佈局」，開啟重佈局後，可設定組件間隙。如下圖所示：

2.5 預覽效果

預覽方式請參考 行動端預覽 ，效果如 1.1 節所示。

注：PC 端可以實現顯示/隱藏效果，但絕對畫布高度不會動態變化。

點選下載範本：FVS行動端實現動態顯示絕對畫布高度.fvs