FVS元件切換分頁JS應用

適用場景：安裝了「FVS大屏編輯模式」插件的使用者，可參考本文了解 FVS 範本製作。

1.1 版本

1.2 預期效果

在文檔 FVS 點選切換分頁 中，已知可使用 JavaScript 代碼實現分頁的切換，本文要介紹的就是元件結合 JavaScript 事件實現切換分頁。

以下拉框為例，預期效果如下圖所示：

1.3 實現思路

給元件設定選項值來源為對應的「頁面名稱」，再給元件新增「編輯結束事件」使用 JavaScript 代碼實現。

JavaScript 代碼範例：

var a = duchamp.getWidgetByName("fenye").getValue(); // 獲取 fenye 元件組件的值
duchamp.switchStory(a); // 跳轉到對應的分頁

2.1 準備範本

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

2.2 設計範本

2.2.1 建立多個頁面

點選範本畫布下方的「建立頁面」，隨意建立多個頁面，再給每個頁面中隨意新增一個圖表。

選中圖表，點選或拖曳到畫布即可。如下圖所示：

2.2.2 新增標題組件

為了示範更直覺，在每個頁面中，新增一個標題組件，內容分別為當前頁面名稱。如下圖所示：

2.2.3 新增下拉框元件

為了方便，可在某一個分頁新增下拉框元件，設定完成後，其他分頁複製貼補即可。

1）新增元件調整位置和尺寸，將綁定參數設定為「fenye」，表示參數即為 fenye 。如下圖所示：

注：建議在「組件>組件屬性>名稱」中設定組件名稱與綁定參數一致，便於後續尋找。

2）設定下拉框元件的選項值來源為「自訂」，點選新增按鈕，設定實際值和顯示值為對應的頁面名稱。如下圖所示：

3）其餘設定可根據實際情況修改，本例中設定預設值為「頁面1」，取消勾選「允許為空」。如下圖所示：

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

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

var a = duchamp.getWidgetByName("fenye").getValue(); // 獲取 fenye 元件組件的值
duchamp.switchStory(a); // 跳轉到對應的分頁

如下圖所示：

設定完成後，將該元件複製貼補到其他頁面即可。

2.4 效果預覽

2.4.1 PC 端

點選右上角「預覽」，PC 端效果如 1.2 節預期效果所示。

2.4.2 行動端

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

點選下載範本：FVS元件切換分頁JS應用.fvs