Axure RP 9 用动态面板实现循环/自动滚动列表

时间:2024-05-21 13:35:49

实现目标

要实现一个自动滚动的列表,如下图所示:

Axure RP 9 用动态面板实现循环/自动滚动列表

 

怎么做呢?

制作好列表,通过以下两种方法来实现滚动。

 

两种实现方式:

方式一,一个动态面板+Loaded事件:

直接上代码:

Axure RP 9 用动态面板实现循环/自动滚动列表

说明:

1、动态面板只有一个状态,数据表放在动态面板中,核心的方法是界面加载的时候,就执行move事件,move事件里面自动滚动列表;
2、务必注意wait方法,因为axure时间中部分时间的执行顺序是并行的,如上图中的Fire Event事件,如果不加wait事件,那么loaded方法一开始就会执行fire event事件,而不是等待move方法执行完成,所以wait方法是关键。

 

方式二,一个动态面板+两个内容展示的动态面板:

面板结构,父级动态面板dy,有两个状态state1和state2,state1里面是dy_table1,state2里面是dy_table2,直接上代码:

第一面板dy:

Axure RP 9 用动态面板实现循环/自动滚动列表

state1里面:所有时间挂在shown事件下,主要是move事件,执行完成以后有一个切换state2的方法,然后切换完成后需要fire event:

Axure RP 9 用动态面板实现循环/自动滚动列表

state2:基本和state1一致

Axure RP 9 用动态面板实现循环/自动滚动列表

简单说下思路:

1、一个动态面板下挂两个状态,每个状态里面都是动态面板,展示的内容都是一样的,每个动态面板动态效果挂在shown下,父级面板只是负责切换状态,子面板主要负责滚动列表;
2、默认loading界面的时候,在父级面板里面调用state1的shown方法,state1滚动效果执行完成以后切换面板state2,并执行state2的shown方法执行滚动;(切换完面板后还能执行面板里面的方法是关键)
3、注意部分地方要用wait方法;