一、滚动表格适用场景

        每当我们需要绘制的原型存在列表和表格内容字段过多时,通常无法在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动态表格效果

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐