FVS實現多個輪播器同步切換

適用場景：安裝了「FineVis數據視覺化」插件的使用者，可參考本文瞭解 FVS 範本的相關功能。

1.1 版本

1.2 場景介紹

在頁面中有多個輪播器時，希望實現 Tab 頁面的同步切換，如下圖所示：

點選左側 Tab 頁面時，右側 Tab 頁面自動同步切換。

1.3 實現思路

透過 getShowIndex() 獲取輪播器切換後當前 Tab 頁面的標題索引，進而同步切換另一個輪播器 Tab 頁面。

2.1 建立範本

點選設計器左上角「檔案>建立視覺化看板」，創建一張空白看板，可自訂名稱和尺寸。如下圖所示：

2.2 報表設計

1）點選左側組件區「容器」，拖入兩個輪播器，左右排列。並且將兩個輪播器分別命名為「輪播器1」和「輪播器2」 。

2）給輪播器拖入圖表，設計好 Tab 欄按鈕，此處簡單的以文字進行區分，具體設計按需求變化。

2.3 新增事件

選中左側的輪播器，點選交互，選擇「新增標籤切換事件」。輸入 JavaScript 代碼如下：

Index=duchamp.getWidgetByName('輪播器1').getShowIndex(); //獲取 輪播器1 當前Tab頁索引
duchamp.getWidgetByName('輪播器2').showCardByIndex(Index); //設定 輪播器2 展示第 Index 個Tab頁

如下圖所示：

2.4 效果預覽

2.4.1 PC 端

點選範本右上角「保存」按鈕，再點選「預覽」。預覽後的效果如 1.2 節所示。

2.4.2 行動端

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

點選下載範本：FVS實現多TAB同步切換.fvs