JS實現FVS切換分頁

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

1.1 版本

1.2 應用場景

在製作 FVS 範本時，可能遇到以下場景：

• 製作分頁較多，希望透過自訂按鈕實現上一頁、下一頁的切換；

• 表格儲存格中擴展多個分頁的名稱，希望透過點選儲存格實現切換不同分頁。

1.3 實現思路

透過給組件新增 JavaScript 點選事件，或透過表格儲存格的 JavaScript 腳本超連結，使用跳轉分頁的 JS API實現。

跳轉分頁的 JS API包括：switchStory（跳轉指定頁）、nextStory（跳轉下一頁）、previousStory（跳轉上一頁）。

2.1 準備範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板，在畫布下方點選「建立頁面」建立分頁。如下圖所示：

每個分頁的內容根據實際情況自行設定即可，這裏不再贅述。

2.2 設定JavaScript事件

1）在「頁面1」中新增 2 個標題組件 ，內容分別為「上一頁」、「下一頁」。

2）選中「上一頁」標題組件，點選右側屬性面板「互動>點選事件」，新增一個「JavaScript」事件。

設定事件名稱為「跳轉到上一頁」，輸入 JavaScript 腳本 ：

duchamp.previousStory();

點選「確定」。如下圖所示：

3）同理給「下一頁」標題組件新增一個 JavaScript 事件，事件名稱為「跳轉到下一頁」，輸入 JavaScript 腳本：

duchamp.nextStory();

4）在一個頁面設定好所有標題組件的點選事件後，將這幾個標題組件直接複製到其他分頁即可。

2.3 效果預覽

2.3.1 PC端

2.3.2 行動端

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

3.1 準備範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白範本，在畫布下方點選「建立頁面」建立分頁。如下圖所示：

每個分頁的內容根據實際情況自行設定即可，這裏不再贅述。

3.2 設計表格及儲存格超連結

1）這裏我們建立一個 內建資料集 ，實現表格中直接拖入欄位顯示分頁名稱。如下圖所示：

2）在「頁面1」中，點選組件區「文字>表格」，將表格新增到頁面中。

3）選中表格，點選右側「編輯組件」，將「分頁」資料集中的「分頁名稱」欄位拖入儲存格，設定擴展方向為橫向擴展。如下圖所示：

4）被選儲存格，點選右側「超級連結」，新增一個「JavaScript腳本」超連結。

先增加一個參數 a ，參數值選擇公式，輸入 $$$ ，表示當前值。再輸入 JavaScript 腳本：

duchamp.switchStory(a);

如下圖所示： 

5）設定好超連結後，再調整儲存格字體、顏色等。根據情況還可以點選頂部菜單欄「範本>PC端自適應屬性」調整表格的自適應屬性。這裏不再贅述。

6）最後點選「傳回視覺化看板」傳回畫布頁面，將表格複製到其他分頁即可。

3.3 效果預覽

3.3.1 PC端

點選範本右上角「儲存」按鈕，再點選「預覽」。其效果如下圖所示：

3.3.2 行動端

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

已完成範本請參見：

JavaScript事件實現切換分頁.fvs

表格超連結傳參實現切換分頁.fvs