适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FineVis 的相关功能。

1.1 版本

1.2 应用场景

当模板转换至移动端页面内容较长且包含多个组件时，用户需要频繁滚动页面才能找到目标组件，影响操作效率和体验。通过组件导航功能，用户可以快速定位到页面中的指定组件，无需手动滑动页面查找，帮助用户在内容间高效切换。

具体效果如下图所示：

1.3 注意事项

• 「开启导航」配置仅在切换至移动端布局后可见

• 不支持扩展组件内的组件

• 组合、容器本身以及内部的组件均支持导航

• Tab 的标签页不支持导航

FVS V3.1.0 版本新增组件导航功能和组件导航接口 duchamp.jumpToMark() ，可以通过开启导航功能或使用 JS 接口实现组件导航。具体说明如下：

2.1 导航功能

2.1.1 功能入口

切换至移动端后，组件的交互面板下，预览设置中新增「导航」功能。默认不开启。

2.1.2 开启导航

1）选中组件，勾选「开启导航」后，出现「导航名称」设置。

导航名称默认跟随组件名称，支持修改，不支持为空、重复。

注：修改名称后若与其他组件导航名称一致则不生效，提示「存在重名，请重新输入」。

2）移动端预览模板，「导航」按钮默认位于底部工具栏中。

点击导航按钮后弹出组件导航选项，选择组件后即可定位到对应组件。如下图所示：

2.1.3 导航规则

1）选中组件后，页面将滚动至该组件所在位置，并使其位于页面顶部。如果组件位于页面的最后一屏，则页面将直接滚动至最后一屏。

2）容器以及容器下的组件同时开启导航，导航列表内不分层级均可选中。如下图所示：

2.2 JavaSrcipt事件

「页面加载结束事件」、「组件交互事件」、「表格单元格超级链接」和「组件初始化后事件」中均支持设置该 JavaScript 事件。

以交互事件为例。选中组件后，点击「交互」，点击「添加事件>鼠标点击」，选择「JavaScript」。如下图所示：

使用的 JavaScript 代码如下：

duchamp.jumpToMark("条形图")