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 準備範本

1）點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板。如下圖所示：

2）根據實際需要自訂視覺化看板名稱、畫布大小、範本樣式，點選「建立看板」。如下圖所示：

2.2 設定Tab組件

1）點選範本畫布左上角「其他>Tab」，將 Tab 組件新增到畫布中。如下圖所示：

4）選中右側 Tab 列表中的 Tab1 組件，佈局方式設定為「等分佈局」。如下圖所示：

2.3  新增下拉框元件

1）新增下拉框元件並調整位置和尺寸，點選右側的「組件」，將元件名稱設定為「index」。如下圖所示：

2）選中下拉框元件，點選「內容」，設定下拉框元件的選項值來源為「自訂」，點選新增按鈕，設定實際值分別為 0、1、2 ，對應的顯示值分別為「標籤頁1、標籤頁2、標籤頁3」 。

如下圖所示：

3）選中下拉框元件，點選右側配置區「交互>新增事件>編輯結束>JavaScript」，輸入 JavaScript 程式碼，點選「確定」。如下圖所示：

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