反饋已提交
網絡繁忙
適用場景:安裝了「FVS大屏編輯模式」插件的使用者,可參考本文了解 FVS 範本製作。
在文檔 FVS 點選切換分頁 中,已知可使用 JavaScript 代碼實現分頁的切換,本文要介紹的就是元件結合 JavaScript 事件實現切換分頁。
以下拉框為例,預期效果如下圖所示:
給元件設定資料字典為對應的「頁面名稱」,再給元件新增「編輯結束事件」使用 JavaScript 代碼實現。
JavaScript 代碼範例:
var a = duchamp.getWidgetByName("fenye").getValue(); // 獲取 fenye 元件組件的值duchamp.switchStory(a); // 跳轉到對應的分頁
點選設計器左上角「檔案>建立視覺化看板」,建立一張空白看板,可自訂範本名稱和尺寸。如下圖所示:
點選範本畫布下方的「建立頁面」,隨意建立多個頁面,再給每個頁面中隨意新增一個圖表。
選中圖表,點選或拖拽到畫布即可。如下圖所示:
為了示範更直覺,在每個頁面中,新增一個標題組件,內容分別為當前頁面名稱。如下圖所示:
為了方便,可在某一個分頁新增下拉框元件,設定完成後,其他分頁複製貼補即可。
1)新增元件調整位置和尺寸,將元件名稱設定為「fenye」,表示參數即為 fenye 。如下圖所示:
2)設定下拉框元件的資料字典為「自訂」,點選新增按鈕,設定實際值和顯示值為對應的頁面名稱。如下圖所示:
3)其餘設定可根據實際情況修改,本例中設定預設值為「頁面1」,取消勾選「允許為空」。如下圖所示:
選中下拉框元件,點選右側配置區「互動>新增事件>編輯結束事件」,輸入事件名稱和 JavaScript 執行腳本:
如下圖所示:
設定完成後,將該元件複製貼補到其他頁面即可,不同分頁的同名元件代表的是相同參數。
點選右上角「預覽」,PC 端效果如 1.2 節預期效果所示。
預覽方式請參考 FVS行動端預覽 ,效果如下圖所示:
點選下載範本:FVS元件切換分頁JS應用.fvs
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙