FVS行動端組件導航快速定位

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

1.1 版本

1.2 應用場景

當範本轉換至行動端頁面內容較長且包含多個組件時，使用者需要頻繁捲動頁面才能找到目標組件，影響操作效率和體驗。透過組件導航功能，使用者可以快速定位到頁面中的指定組件，無需手動滑動頁面尋找，幫助使用者在內容間高效切換。

具體效果如下圖所示：

1.3 注意事項

• 「開啟導航」配置僅在切換至行動端佈局後可見

• 不支援擴展組件內的組件

• 組合、容器本身以及內部的組件均支援導航

• Tab 的標籤頁不支援導航

FVS V3.1.0 版本新增組件導航功能和組件導航API duchamp.jumpToMark() ，可以透過開啟導航功能或使用 JS API實現組件導航。具體說明如下：

2.1 導航功能

2.1.1 功能入口

切換至行動端後，組件的交互面板下，預覽設定中新增「導航」功能。預設不開啟。

2.1.2 開啟導航

1）選中組件，勾選「開啟導航」後，出現「導航名稱」設定。

導航名稱預設跟隨組件名稱，支援修改，不支援為空、重複。

注：修改名稱後若與其他組件導航名稱一致則不生效，提示「存在重名，請重新輸入」。

2）行動端預覽範本，「導航」按鈕預設位於底部工具欄中。

點選導航按鈕後彈出組件導航選項，選擇組件後即可定位到對應組件。如下圖所示：

2.1.3 導航規則

1）選中組件後，頁面將捲動至該組件所在位置，並使其位於頁面頂部。如果組件位於頁面的最後一屏，則頁面將直接捲動至最後一屏。

2）容器以及容器下的組件同時開啟導航，導航列表內不分層級均可選中。如下圖所示：

2.2 JavaSrcipt事件

「頁面載入結束事件」、「組件交互事件」、「表格儲存格超級連結」和「組件初始化後事件」中均支援設定該 JavaScript 事件。

以交互事件為例。選中組件後，點選「交互」，點選「新增事件>滑鼠點選」，選擇「JavaScript」。如下圖所示：

使用的 JavaScript 程式碼如下：

duchamp.jumpToMark("組件名稱")

注：V3.2.1 之前版本為 duchamp.jumpToMark("導航名稱") 。