案例22. 中继器：选择对比商品（3）

案例来源:

京东-商品列表页

 

案例效果：

• 取消/删除时：（图1-191）

• 清空对比时：（图1-192）

 

案例描述：

取消选中或点击对比栏中的“删除”按钮都可以删除对比栏中的商品信息；点击“清空对比栏”按钮，可以删除对比栏中所有的商品信息。

 

元件准备：

见案例20与案例21。

 

包含命名：

见案例20。

 

思路分析：

• 在案例21中，我们设置了中继器“GoodsList”【每项加载时】事件的“用例3”，如果状态值是“True”就选中图片“CheckImage”；在当前的案例中，我们需要做删除对比信息的效果；而删除对比信息时，要对应取消选中图片“CheckImage”；（操作步骤1）
• 点击“清空对比栏”需要删除全部商品信息；同时，需要取消商品列表中“对比”按钮复选框的选中状态；（操作步骤2~3）
• 点击“删除”按钮，可以删除当前的商品信息；同时，需要取消商品列表中对应的“对比”按钮复选框的选中状态；（操作步骤3~4）
• 点击“对比”按钮时，如果复选框是选中的状态，则取消复选框的选中状态；同时，删除对比栏中对应当前的商品信息。（操作步骤5~6）

 

操作步骤：

在案例21的基础上继续进行操作：

1、为中继器“GoodsList”【每项加载时】事件添加“用例4”，软件会自动设置条件为“Else If”，与“用例3”形成关联；在“用例4”中直接添加，不符合“用例3”条件时的动作为【取消选中】图片“CheckImage”；

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

2、为“清空对比栏”按钮的【鼠标单击时】事件添加“用例1”，设置动作为【删除行】中继器“ContrastList”，删除目标选择【条件】，{条件}中填写“True”；“True”表示该中继器数据集中每一个数据行都符合删除条件；

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

3、继续上一步，为“用例1”添加第2个动作，【更新行】到中继器“GoodsList”；更新目标选择“条件”；{条件}中填写“[[Item.IsSelected==’True’]]”；点击【选择列】，选择“IsSelected”，为其设置新值“False”；

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

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

4、“对比”商品信息中的删除按钮“DeleteButton”默认为白色，在元件属性中设置【鼠标悬停】的交互样式，设置字体颜色为蓝色；在动态面板“ItemPanel”的元件属性中勾选【允许触发鼠标交互】，这样鼠标只要进入动态面板范围内，就会触发“DeleteButton”的【鼠标悬停】交互样式，呈现蓝色可见状态。（图1-197）

5、为对比商品信息中删除按钮“DeleteButton”（图1-197）的【鼠标单击时】事件添加“用例1”，设置动作为【删除行】中继器“ContrastList”，删除目标选择【This】，表示删除当前项所对应的数据行；

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

6、继续上一步，为“用例1”添加第2个动作，【更新行】到中继器“GoodsList”；更新目标选择“条件”；{条件}中填写“[[TargetItem.GoodsName==Item.ContrastName]]”；点击【选择列】，选择“IsSelected”，为其设置新值“False”；“TargetItem”表示目标中继器的数据行，该条件表示要更新目标中继器中“GoodsName”列值与当前数据行“ContrastName”列值相同的数据行；

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

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

7、为“对比”按钮的动态面板，添加“用例3”；这时，软件会自动关联“用例2”，设置条件为“Else If”，即不满足“用例2”的条件的情形；添加动作【更新行】到中继器“GoodsList”；更新目标选择【This】；点击【选择列】，选择“IsSelected”，为其设置新值“False”；

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

8、继续上一步，设置动作为【删除行】中继器“ContrastList”，删除目标选择【条件】，{条件}填写“[[TargetItem.ContrastName==Item.GoodsName]]”；这个条件表示删除目标中继器中“ContrastName”列值与当前数据行 “GoodsName” 列值相同的数据行。

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

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

补充说明：

本案例中未对商品列表其它交互进行设置，比如鼠标进入商品信息区域显示带阴影的背景矩形；该效果大家可以参考本案例中元件“DeleteButton”鼠标悬停效果的实现思路。

 

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

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

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

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