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

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


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

首先效果图:

演示链接: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个星时显示“极好”。

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (31)
  • jiabin 普通用户 29天前
    0 引用 32
    很好
  • 新梦 普通用户 1月前
    0 引用 31
    感谢分享
  • withinight 普通用户 3月前
    0 引用 30
    感谢分享
  • wowo 普通用户 5月前
    0 引用 29
    感谢
  • 茅嘉懿他老子 普通用户 6月前
    0 引用 28
  • 告辞 普通用户 6月前
    0 引用 27
    感谢
  • momoo 普通用户 6月前
    0 引用 26
    感谢分享
  • doudouken 普通用户 8月前
    0 引用 25
    谢谢
  • qzl123 普通用户 8月前
    0 引用 24
    非常感谢!
  • ananan 普通用户 2020-11-16
    0 引用 23
    感谢分享
  • meingst 普通用户 2020-10-11
    0 引用 22
    感谢分享
  • weiwuhu 普通用户 2020-10-10
    0 引用 21
    感谢分享
  • 汪富贵儿 普通用户 2020-9-27
    0 引用 20
    感谢分享哦
  • 柒月喵 普通用户 2020-8-22
    0 引用 19
    谢谢
  • 小咩666 普通用户 2020-8-20
    0 引用 18
    感谢分享
  • Enter 普通用户 2020-8-18
    0 引用 17


    感谢分享

  • 柚子_1581044410 普通用户 2020-8-7
    0 引用 16
    感谢分享
  • 暖暖_1594784296 普通用户 2020-7-24
    0 引用 15
    感谢分享
  • 965280aa 普通用户 2020-6-11
    0 引用 14
    感谢分享
  • 破碎的石头 普通用户 2020-5-27
    0 引用 13
    感谢
  • 77jy 普通用户 2020-5-27
    0 引用 12
    谢谢
  • 15079208394 普通用户 2020-5-19
    0 引用 11
    谢谢
  • meihao 普通用户 2020-5-15
    0 引用 10
    感谢分享 
  • 刀刀狗 普通用户 2020-5-13
    0 引用 9
    感谢
  • 泡泡2代 普通用户 2020-5-11
    0 引用 8
    感谢分享
  • babybear619 普通用户 2020-4-29
    0 引用 7
    感谢分享
  • ECHO_HE 普通用户 2020-4-26
    0 引用 6
    感谢分享
  • gxlqs2249 普通用户 2020-4-26
    0 引用 5
    感谢楼主
  • 千山飞鸟 普通用户 2020-4-26
    0 引用 4
    感谢楼主分享
  • lisheng 普通用户 2020-4-25
    0 引用 3
    感谢分享
  • 沈十三 管理员 2020-3-24
    0 引用 2
    感谢分享,已获得10金币奖励!
返回
axure商城