Axure中继器冻结列/冻结首列/冻结尾列

前言

冻结列（Freeze Columns）是指在表格或数据视图中，将某些列固定，使其在水平滚动时始终显示在视野中，通常用于展示包含大量数据的表格。冻结列的功能常见于电子表格软件（如 Excel）或者网页数据表格中，尤其是在需要同时查看关键字段和其他大量数据时，它可以显著提高数据查看的效率。

教程

这次的教程，我先采用新的目录结构图，感觉这样会更一目了然：

• Q&A
  • 冻结列为什么要加容器呢？
    • 是因为加了容器，就可以实现多列冻结效果。
  • 为什么要把所有列都放在行动态面板里呢？
    • 是因为可以触发内部元件鼠标交互样式。
  • 为什么需要“尾列占位符”？
    • 是为了滚动更丝滑。
  • 为什么中继器要放在容器里？
    • 如果后面方便实现阴影效果。

其中“尾列占位符”要跟“交结尾列容器R”相同坐标相同宽度相同高度，如果还是看不懂，那就还是看下传统结构概览吧，注意一下元件之间的层级顺序：

现在我们来添加交互，如果需要前后阴影效果的话，需要先在“中继器容器”上添加交互：

目的是在中继器添加删除行时自动维护前后阴影的高度。

接下来在“外层容器”上添加滚动的交互：

其中控制右边界的last是”尾列占位”元件：

就是让垂直滚动时，“标题行”跟着窗口上下跟随，水平滚动时“冻结首列容器L”始终在容器最左边，“冻结尾列容器R”始终在窗口最右边。

然后在“冻结首列容器L”上添加交互，让中继器内的“冻结首列容器l”保持一致：

在“冻结尾列容器R”上添加交互，让中继器内的“冻结尾列容器r”保持一致：

就这么简单，一个可以同时垂直滚动加水平滚动的，同时首列冻结加尾列冻结的功能就做好了。

如果觉得我的教程做的不错呢，欢迎关注、收藏、转发、捐赠，谢谢。

原文链接：Axure中继器冻结列/冻结首列/冻结尾列

转载请注明：最InのAxure » Axure中继器冻结列/冻结首列/冻结尾列