自訂按鈕切換輪播器Tab頁

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

1.1 版本

1.2 預期效果

FVS輪播器組件 自帶的「Tab欄按鈕」僅支援幾種內建樣式和固定的 4 個位置，在實際製作過程中，其樣式和佈局並不能很好的滿足各種場景。

所以本文將介紹如何使用 JavaScript 事件去實現一些自訂的需求。預期效果如下圖所示：

1.3 實現思路

1）使用 標題組件 作為按鈕，給標題組件新增 JavaScript 型別的點選事件，結合 showCardByIndex(index) API設定輪播器組件展示對應的 Tab 頁。

2）使用 setVisible API，透過設定組件的隱藏或顯示，實現按鈕選中與未選中的背景差別。

2.1 建立範本

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

2.2 設定輪播器組件

1）首先我們新增一個輪播器組件到畫布中，再隨意新增一些圖表組件，可以將圖表組件進行組合。如下圖所示：

注：同時選中多個組件，按滑鼠右鍵，點選「組合」即可將組件組合在一起。

2）再依次選中組件或組合，將其拖入輪播器中，組件在輪播列表中的順序與左側組件圖層的順序保持一致。如下圖所示：

注：V1.10.1 及之後版本的插件才支援將「不包含輪播器組件的組合」拖入輪播器組件。

3）輪播器組件預設開啓自動輪播，本例為了示範需要，需取消勾選「開啓自動輪播」。如下圖所示：

2.3 設定標題組件

1）上述步驟中，輪播器根據拖入的組件和組合預設生成了 3 個 Tab 頁，因此我們需要新增 3 個 標題組件，內容分別設定為「Tab0、Tab1、Tab2」。

2）新增 3 個圖片組件，在「內建圖片」中選擇一張合適的邊框背景作為按鈕選中時的背景。再將 3 個圖片組件重命名，便於後續 JavaScript 事件識別組件。

為了實現預設選中 Tab0 的效果，需要將「Tab0選中背景」顯示，將「Tab1選中背景」和「Tab2選中背景」隱藏。如下圖所示：

2.4 設定 JavaScript 事件

選中「Tab0」標題組件，點選「互動>點選事件>新增點選事件>JavaScript」，在彈出框中設定事件名稱，輸入 JavaScript 腳本：

duchamp.getWidgetByName("輪播器1_頁面1").showCardByIndex(0); //設定 輪播器1_頁面1 展示第 1 個 Tab 頁
duchamp.getWidgetByName("Tab0選中背景").setVisible(true); //設定Tab0選中背景為可見
duchamp.getWidgetByName("Tab1選中背景").setVisible(false); //設定Tab1選中背景為不可見
duchamp.getWidgetByName("Tab2選中背景").setVisible(false); //設定Tab2選中背景為不可見

步驟如下圖所示：

另外兩個標題同理設定即可，只需修改對應 Tab 頁的索引和顯示/隱藏的背景名稱。

• 「Tab1」標題組件 JavaScript 腳本如下：

duchamp.getWidgetByName("輪播器1_頁面1").showCardByIndex(1);
duchamp.getWidgetByName("Tab1選中背景").setVisible(true);
duchamp.getWidgetByName("Tab0選中背景").setVisible(false);
duchamp.getWidgetByName("Tab2選中背景").setVisible(false);

• 「Tab2」標題組件 JavaScript 腳本如下：

duchamp.getWidgetByName("輪播器1_頁面1").showCardByIndex(2);
duchamp.getWidgetByName("Tab2選中背景").setVisible(true);
duchamp.getWidgetByName("Tab1選中背景").setVisible(false);
duchamp.getWidgetByName("Tab0選中背景").setVisible(false);

2.5 效果預覽

2.5.1 PC 端

預覽效果如 1.2 節預期效果所示。

2.5.2 行動端

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

2.6 擴展-自動輪播同時切換按鈕

上述步驟中，我們取消了輪播器組件的「自動輪播」，僅示範了手動切換的效果。

但有些時候，使用者希望它是可以自動輪播，且能手動切換的，這時我們可以透過給輪播器組件新增「標籤切換事件」實現。

就以上述範例為例，開啓自動輪播，將輪播間隔設定為 3000 毫秒，點選「新增標籤切換事件>JavaScript」，輸入 JavaScript 腳本：

var a=duchamp.getWidgetByName('輪播器1_頁面1').getShowIndex(); //獲取輪播器當前展示的 Tab 頁的索引
//根據索引判斷Tab頁，進而設定要隱藏或顯示的組件
if(a===0){ 
    duchamp.getWidgetByName("Tab0選中背景").setVisible(true);
    duchamp.getWidgetByName("Tab1選中背景").setVisible(false);
    duchamp.getWidgetByName("Tab2選中背景").setVisible(false);
}
if(a===1){
    duchamp.getWidgetByName("Tab1選中背景").setVisible(true);
    duchamp.getWidgetByName("Tab0選中背景").setVisible(false);
    duchamp.getWidgetByName("Tab2選中背景").setVisible(false);
}
if(a===2){
    duchamp.getWidgetByName("Tab2選中背景").setVisible(true);
    duchamp.getWidgetByName("Tab0選中背景").setVisible(false);
    duchamp.getWidgetByName("Tab1選中背景").setVisible(false);
}

步驟如下圖所示：

效果預覽如下：

1）PC 端

點選右上角「預覽」，預覽效果如下圖所示：

2）行動端

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

Tab頁自動輪播同時切換按鈕.fvs

自定義按鈕切換輪播器Tab頁.fvs