1.1 版本

1.2 应用场景

在决策报表移动端使用中希望实现滑动 Tab 块内容即可切换 Tab 标签页的效果。

勾选「支持滑动切换」后，无需点击或滑动 Tab 标题，滑动 Tab块 内容即可实现滑动切换 Tab 标签页，效果如下图所示：

2.1 功能入口

1）点击下载示例模板：组件多样化.frm 在设计器中打开，或直接在设计器中打开：%FR_HOME%\webapps\webroot\WEB-INF\doc\frm\组件多样化.frm 。

2）点击右侧「组件设置>tabpane0」，选择「移动端」。

3）移动端面板下新增 Tab 滑动切换相关的 3 个设置项，如下图所示：

• 显示标题：默认勾选，取消勾选不会显示 Tab 标题栏，也就无法通过点击 Tab 标题来切换 Tab 块。

• 支持滑动切换：默认不勾选，勾选后可以左右滑动 Tab 内容切换 Tab 块。

• 显示圆点指示器：默认不勾选，勾选后可以显示圆点指示器，有几个 Tab 块就有几个圆点，切换到哪个 Tab 块，对应的圆点会高亮。

2.2 显示标题

1）「显示标题」控制是否显示 Tab 标题栏。

2）取消勾选「显示标题」，标题则不显示；勾选「显示标题」，标题显示，可通过点击标题切换 Tab块，效果如下图所示：

2.3 支持滑动切换

1）「支持滑动切换」控制预览时是否可以左右滑动 Tab 内容来切换 Tab 块。

2）取消勾选「支持滑动切换」，不可通过滑动Tab 内容切换Tab 标签页；勾选「支持滑动切换」后，可通过滑动Tab 内容切换Tab 标签页，效果如下图所示：

2.4 显示圆点指示器

「圆点指示器」即提示有几个 Tab 块，切换到哪个 Tab 块，对应的圆点会高亮。

勾选之后会出现 3 个设置项，分别如下：

• 显示方式：提供了 2 种方式，区别在于显示效果不同。

• 初始填充：Tab 块对应圆点的初始填充色。

• 选中填充：Tab 块对应圆点的选中填充色，即高亮色。

注1：移动端样式模板选择「滑动式」时，圆点的初始填充色和选中填充色按照「滑动式>tab样式」的设置生效，此处的「初始填充」和「选中填充」设置不生效。

注2：不能使用圆点指示器来滑动切换 Tab 块，它只是作提示用。

2.4.1 显示方式

若显示方式选择「占位显示」，圆点指示器则显示在 Tab 块内容外面；

若显示方式选择「悬浮显示」，圆点指示器则悬浮在 Tab 块内容上方，如下图所示：

2.4.2 显示位置

不同样式模板下圆点指示器的显示位置如下表所示：