FVS分頁跳轉事件

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

注：不支援行動端。

1.1 版本

1.2 功能簡介

在 FVS畫布自適應 文檔中，我們瞭解瞭如何使用 FVS 自帶的切換按鈕切換分頁。但很多時候，左下角的切頁按鈕並不能滿足實際需求。

因此提供了「分頁跳轉」事件，可實現自訂按鈕點選切換分頁，同時支援傳參，切頁的同時可實現資料聯動變化效果。

注：部分組件不支援「點選事件」，詳情可參考文檔 FVS組件框架互動屬性。

選中組件，點選「交互>點選事件」，選擇「新增點選事件>分頁跳轉」，彈出分頁跳轉設定框。

• 事件名稱：必填項，可手動輸入事件的名稱。不可與當前組件的其他事件重名。

• 觸發物件：下拉可選擇當前範本中的頁面。當點選組件時，跳轉至選中的頁面。

• 參數：V1.16.0 及之後版本，支援分頁跳轉的同時傳遞參數，進而實現資料變化。

注：傳遞的參數相當於全局參數，對整個範本有效。即分頁跳轉到指定頁面，但傳參對所有頁面生效。

3.1 新建範本

點選設計器左上角「檔案>新建大屏報表」，建立一張空白大屏，可自訂名稱和尺寸。如下圖所示：

3.2 準備資料

建立兩個資料庫查詢，SQL 查詢語句分別為：

ds1：SELECT * FROM 銷量

ds2：SELECT * FROM 銷量 where 地區='${area}'  ，並設定 area 參數預設值為「華東」。如下圖所示： 

3.3 設計範本內容

1）點選畫布下方「建立頁面」建立分頁，如下圖所示：

2）在「頁面1」中，新增 2 個 標題組件 ，內容分別為 2 個分頁的名稱。新增一個餅圖組件，綁定資料為 ds1 資料集的地區和銷量欄位。如下圖所示：

3）在「頁面2」中，新增一個柱形圖組件，綁定資料為含有參數的 ds2 資料集資料。如下圖所示：

3.4 設定分頁跳轉事件

3.4.1 標題組件設定分頁跳轉

1）在「頁面1」中選中標題組件，點選右側屬性面板「互動>點選事件」，新增「分頁跳轉」事件。2 個標題組件分別設定不同的觸發物件即可。

以標題「頁面1」為例，步驟如下圖所示：

2）將「頁面1」設定好分頁跳轉事件的兩個標題組件複製貼補到「頁面2」。

3.4.2 餅圖組件設定分頁跳轉並傳參

在「頁面1」中，選中餅圖組件，點選右側屬性面板「互動>點選事件」，新增「分頁跳轉」事件跳轉到「頁面2」。並新增參數 area ，參數型別選擇「當前組件欄位」，參數內容選擇「系列名」。如下圖所示：

3.5 效果預覽

點選標題組件，即可跳轉到對應頁面；點選餅圖的系列時，即可跳轉到「頁面2」，且將餅圖系列作為參數 area 的參數值傳遞給範本，範本中使用了參數 area 的組件均聯動變化。

1）PC端預覽

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

2）行動端預覽

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

點選下載範本：FVS實現分頁跳轉並傳參.fvs