案例21. 中继器：选择对比商品（2）

案例来源:

京东-商品列表页

 

案例效果：

见案例20。

 

案例描述：

在上个案例的基础上（见案例20），添加对重复添加对比商品的限制。

 

元件准备：

• 在案例20的基础上新增内容：（图1-182）

包含命名：

• 见案例20

 

思路分析：

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

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

 

操作步骤：

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

• 条件判断设置：（图1-183）

• 用例动作设置：（图1-184）

• 事件交互设置：（图1-185）

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

• 事件交互设置：（图1-186）

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

• 条件判断设置：（图1-187）

• 事件交互设置：（图1-188）

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

• 用例动作设置：（图1-189）

• 事件交互设置：（图1-190）

补充说明：

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

---------------------------------------------------- End ----------------------------------------------------

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

小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！

《AxureRP7.0从入门到精通》------从零向高手蜕变的必修课------<<想上它，插这里！>>