AxureRP8实战手册-案例21(中继器:选择对比商品②)

AxureRP8.0教程 小楼一夜听春语 2692℃ 0评论

案例21. 中继器:选择对比商品(2)

案例来源:

京东-商品列表页

 

案例效果:

见案例20。

 

案例描述:

在上个案例的基础上(见案例20),添加对重复添加对比商品的限制。

 

元件准备:

  • 在案例20的基础上新增内容:(图1-182)

1_182

包含命名:

  • 见案例20

 

思路分析:

中继器在每项数据加载时,可以通过对列值进行判断对元件进行控制;所以,如果想限制“对比”按钮被点击时,不会重复添加数据,我们可以单独在中继器数据集中添加一列,用于记录选中的状态(见元件准备);然后,通过对这个状态值的判断,进行不同的交互:

  • 如果状态值为“True”,说明商品已添加,该项数据加载时,要对复选框图片进行选中的操作;(操作步骤1)
  • 如果状态值为“False”,说明商品未添加,可以进行添加对比商品信息的操作;(操作步骤3)
  • 每个商品的选中状态值,初始时为“False”,成功添加对比商品信息时,要将状态值更新为“True”。(操作步骤4)

 

操作步骤:

1、在中继器“GoodsList”的【每项加载时】事件中,添加“用例3”;为用例添加条件判断【值】“[[Item.IsSelected]]”【==】【值】“True”;设置符合条件时的动作为【选中】图片“CheckImage”;最后,在该用例上点击<鼠标右键>,选择【切换为<If>或<Else If>】,将用例的判断转换为“If”格式;

  • 条件判断设置:(图1-183)

1_183

  • 用例动作设置:(图1-184)

1_184

  • 事件交互设置:(图1-185)

1_185

2、因为,在上一步中,添加了中继器【每项加载时】对图片“CheckImage”的选中交互;“案例20”中“操作步骤4”所设置的动作就不再需要,将其删除;

  • 事件交互设置:(图1-186)

1_186

3、为“对比”按钮所在动态面板(见上图)的【鼠标单击时】事件添加“用例2”,设置条件判断【值】“IsSelected”【==】【值】“False”;完成条件判断设置后确定保存,退出用例编辑界面;将“案例20”中“操作步骤6”所设置的动作,从图片“CheckImage”的交互中复制到“用例2”中,并删除图片“CheckImage”的交互;最后,在该用例上点击<鼠标右键>,选择【切换为<If>或<Else If>】,将用例的判断转换为“If”格式;

  • 条件判断设置:(图1-187)

1_187

  • 事件交互设置:(图1-188)

1_188

4、继续上一步,在“用例2”中添加第2个动作,【更新行】到中继器“GoodsList”;配置中选择【This】,表示更新当前行;然后,在【选择列】列表中选择“IsSelected”,为其设置新值“True”。

  • 用例动作设置:(图1-189)

1_189

  • 事件交互设置:(图1-190)

1_190

补充说明:

本案例交互流程为:点击“对比”按钮时,会对状态值进行判断;如果状态值为“False”,表示按钮未被选中,这时,将商品信息添加到对比栏,并更新当前商品的“IsSelected”列值为“True”;中继器数据集的数据被更新时会让中继器重新加载数据,从而触发【每项加载时】事件,那么,我们写在事件里的“用例3”就会发生作用,通过判断改变图片“CheckImage”的样式。

 

特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,全新的套路,经典的姿势,更舒爽,更润滑,更紧致,更销魂,想体验这种欲罢不能的学习感觉?快从下面进入!

《AxureRP 8 入门与实战 - 入门篇》------从零入门的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例21(中继器:选择对比商品②)

喜欢 (10)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 为什么一直点会一直添加对比
    波波2016-10-14 16:02 回复