FVS元件切換輪播器Tab頁

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本製作。

1.1 版本

1.2 預期效果

FVS-Tab組件 可按照一定規則輪播或手動切換，但有時希望使用其他組件切換 Tab 頁，例如使用下拉框切換 Tab 頁。預期效果如下圖所示：

1.3 實現思路

給元件設定自訂資料字典，實際值為Tab組件每個標籤頁的索引，再給元件新增「編輯結束事件」使用 JavaScript 代碼實現選擇切換。

JavaScript 代碼範例：

var a = duchamp.getWidgetByName("index").getValue(); //獲取下拉框元件的實際值（字串格式）
duchamp.getWidgetByName("Tab1_頁面1").showCardByIndex(+a); //設定Tab組件展示第 a 個標籤頁，這裏需使用 + 號將獲取到的值轉換為數字格式

2.1 準備範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板，根據實際情況自訂範本名稱和尺寸。如下圖所示：

2.2 設計範本

2.2.1 新增Tab組件

點選範本畫布右側「容器>Tab」，將 Tab 組件新增到畫布中，點選組件右上角「建立標籤頁」重新整理增兩個標籤頁。如下圖所示：

2.2.2 修改Tab設定

為了本文範例便於觀察，將標籤頁分別重新命名為 Tab0、Tab1、Tab2 ，雙擊即可重新命名 。

再選中「Tab1_頁面1」組件，選擇「Tab欄按鈕」並設定為「等分佈局」。如下圖所示：

2.2.3 新增圖表

選中標籤頁後，隨意拖動一些圖表組件到標籤頁中即可。如下圖所示：

2.2.4 新增下拉框元件

1）新增元件調整位置和尺寸，將元件名稱設定為「index」，表示參數即為 index 。

2）設定下拉框元件的資料字典為「自訂」，點選新增按鈕，設定實際值分別為 0、1、2 ，對應的顯示值分別為 Tab0、Tab1、Tab2 。

如下圖所示：

2.3 下拉框設定編輯結束事件

選中下拉框元件，點選右側配置區「互動>新增事件>編輯結束事件」，輸入事件名稱和 JavaScript 執行腳本：

var a = duchamp.getWidgetByName("index").getValue(); 
//獲取下拉框元件的實際值（字串格式）
duchamp.getWidgetByName("Tab1_頁面1").showCardByIndex(+a); 
//設定Tab組件展示第 a 個標籤頁，這裏需使用 + 號將獲取到的值轉換為數字格式

如下圖所示：

2.4 預覽效果

2.4.1 PC 端

範本完成後，點選右上角「預覽」。效果如 1.2 節預期效果所示。

2.4.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：FVS實現元件切換Tab頁.fvs