Axure教程:使用中继器和动态面板制作评分组件 获赏10金币 案例教程 基础教程

人隐江湖 普通用户 2020-3-24 3380


本教程主要介绍如何使用中继器和动态面板制作评分组件。

首先效果图:

演示链接:https://e1dizv.axshare.com

文章主要分为绘制元件、添加交互、文章小结三部分。


一、绘制元件

1. 【中继器】:绘制一个中继器,命名为“Rate”;将布局改为水平;

  

    在中继器“Rate”中添加“Hover”、 “Selected”两列,添加5行数据,全部设置为“0”; 

 

    备注:Hover列控制五角星的选中效果,Selected列存储五角星的选中状态;行数决定五角星的个数(PS:看不懂可先进行下一步)。

2. 【中继器面板】:右键给中继器“Rate”创建动态面板,将面板命名为RatePanel

     备注:创建面板是为了后续在面板上添加交互,也可创建组,在组上添加交互。

3. 【五角星】:打开中继器“Rate”,选中里面的矩形,右键“选择形状”将其改为五角星,命名为“Icon”,设置大小为24*24,去掉边框,填充颜色; 

 

4. 【五角星面板】:右键给五角星“Icon”创建动态面板,命名为“IconPanel”;设置大小30*24;

 

     备注:创建面板是为了隔出五角星之间的距离,也为了后续在面板上添加交互。

二、添加交互

1. 【五角星】:设置五角星“Icon”的交互样式:选中时改变填充颜色;

 

2. 【五角星】:为五角星“Icon”的【载入时】事件添加动作:将“Hover”值为“1”的设置选中;

3. 【五角星】:为五角星“Icon”的【单击时】事件添加动作:

    更新行:将大于当前“index”值的“Selected”值设置为“0”;

    

    更新行:将小于等于当前“index”值的“Selected”值设置为“1”;

    

    添加交互后截图如下:

 

4. 【五角星面板】:为五角星面板“IconPanel”的【移入时】事件添加动作:

    更新行:将大于当前“index”值的“Hover”值设置为“0”;

 

    更新行:将小于等于当前“index”值的“Hover”值设置为“1”;

    添加交互后截图如下:

 

5. 【中继器】:删除中继器“Rate”的【每项加载】事件的所有动作;

6. 【中继器面板】:为中继器面板“RatePanel”的【移出时】事件添加动作:

    更新行:用“Selected”值替换“Hover”值;

    添加交互后截图如下:

 

三、文章小结

1. 可以将五角星替换为其他形状,例如心形;

2. 可以给评分添加文字描述,例如选中5个星时显示“极好”。

上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (0)
返回