Axure 9 滚动&动态表格制作方法

一、滚动表格适用场景

        每当我们需要绘制的原型存在列表和表格内容字段过多时，通常无法在Web网页屏幕内完全展示，即超出屏幕可视范围，滚动表格就能够完整的展现，解决这个问题。（当然也可以直接将内容溢出网页尺寸，不影响研发查看原型字段，如果追求高保真或美观的小伙伴可参考）

        1.动态面版：首先我们需要在页面上拖一个动态面板

        2.在动态面板上右键选择需要滚动的方式

          3.双击面板，进入面板编辑，插入列表或表格

如图虚线部分即开始滚动的部分，可按需调整

效果如图：左侧表格选择的滚动方式是“按需滚动”横向和垂直都滚动，右侧列表选择的是垂直滚动

二、动态表格

 在排行榜或者大屏展示多项数据时，滚动表格可以动态的将排名、多项表数据进行动态滚动展示，下面以大屏中的某个企业设备故障统计表为例

 1.首先我们将统计表分为两个板块，一个是表头（无需滚动），一个是表内容（需滚动），需要滚动的部分先拉出动态面板并设置动态面板名称为“轮播面板”，如下图

2.将需要展示的表格内容放进动态面板中，并转为动态面板，设置动态面板名称为“滚动区域”

3.配置轮播事件

• 选择轮播区域，点击【交互】->【新建交互】

• 选择【载入时】-【等待】

• 配置等待时间这里我设置2000ms（可按需修改）

• 左侧搜索【移动】动作点击选择【当前元件】，配置到达坐标（0，[[box.height-This.height]]），动画效果为“线性”，线性移动速度可按需调整；
• 【移动坐标配置】：首先我们需要点击函数进入编制变量或函数的弹窗

• 下方创建一个局部变量，命名为“box”（可以是任意英文小写），局部变量值为元件-轮播面板（刚刚我们在2中创建的动态面板）
• 创建好局部变量后，点击“插入变量或函数”搜索局部变量名称“box”和height选择插入，用box.height-This.height,最终格式为[[box.height-This.height]]

• 接着我们继续加入动作【等待】这里我设置的是12000ms

• 继续加入动作【移动】 

• 继续加入动作 【等待】

• 最后我们加入【触发事件】选择【载入时】事件触发即可

4.轮播效果

Axure动态表格效果