Axure游戏列表翻页功能

时间:2024-05-21 13:36:13

 

Axure游戏列表翻页功能

Axure游戏列表翻页功能

今天我们要做的原型是游戏列表的翻页功能,如上图所示。

具体设计如下:

(1)当点击第一页和最后一页的时候,分别隐藏“上一页”和“下一页”按钮;否则,显示“上一页”和“下一页”按钮;

(2)当点击第5页到第8页时,按钮变化如下:

   第5页:1   ...   4    5    6    ...   12

   第6页:1   ...   5    6    7    ...   12

   第7页:1   ...   6    7    8    ...   12

   第8页:1   ...   7    8    9    ...   12

  选中第四个按钮;

(3)当点击第9页~12页时,按钮变化如下:1   ...   8    9    10    11  12;

(4)设置按钮选中状态为粗体/红色;

(5)当点击任何一个页数的按钮时,都会选中对应页数的按钮,界面也都会切到相应页面;

设计逻辑:

(1)我们设置每一个按钮的点击事件:切换到对应this.text值的pageIndex。并且设置选中状态为粗体红体;

(2)用一个隐藏的矩形元件,用来做触发事件。该元件的事件有”鼠标单机“(设置隐藏上一页或者下一页),”鼠标双击“(用来设置按钮的text变化)和“鼠标右击”(用来设置不同页面选择的时候,哪个按钮能被选中)。

(3)最后对每个按钮的点击事件增加对隐形矩形元件的触发事件:单击/双击和右击。

具体实例:

对隐形矩形的事件交互如下

(1)鼠标单击时:

Axure游戏列表翻页功能Axure游戏列表翻页功能

(2)鼠标双击时:

Axure游戏列表翻页功能Axure游戏列表翻页功能

(3)鼠标右击时:

Axure游戏列表翻页功能Axure游戏列表翻页功能

对每个按钮元件的事件交互如下:

Axure游戏列表翻页功能

 

对“上一页”和“下一页”按钮的交互设计:

Axure游戏列表翻页功能

Axure游戏列表翻页功能

如果想每天学一点新的知识,敬请关注微信公众号

Axure游戏列表翻页功能

微信扫一扫
关注该公众号