案例22. 中继器:选择对比商品(3)
案例来源:
京东-商品列表页
案例效果:
- 取消/删除时:(图1-191)
- 清空对比时:(图1-192)
案例描述:
取消选中或点击对比栏中的“删除”按钮都可以删除对比栏中的商品信息;点击“清空对比栏”按钮,可以删除对比栏中所有的商品信息。
元件准备:
见案例20与案例21。
包含命名:
见案例20。
思路分析:
- 在案例21中,我们设置了中继器“GoodsList”【每项加载时】事件的“用例3”,如果状态值是“True”就选中图片“CheckImage”;在当前的案例中,我们需要做删除对比信息的效果;而删除对比信息时,要对应取消选中图片“CheckImage”;(操作步骤1)
- 点击“清空对比栏”需要删除全部商品信息;同时,需要取消商品列表中“对比”按钮复选框的选中状态;(操作步骤2~3)
- 点击“删除”按钮,可以删除当前的商品信息;同时,需要取消商品列表中对应的“对比”按钮复选框的选中状态;(操作步骤5~6)
- 点击“对比”按钮时,如果复选框是选中的状态,则取消复选框的选中状态;同时,删除对比栏中对应当前的商品信息。(操作步骤7~8)
操作步骤:
在案例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”,设置动作为【更新行】到中继器“GoodsList”;更新目标选择“条件”;{条件}中填写“[[TargetItem.GoodsName==Item.ContrastName]]”;点击【选择列】,选择“IsSelected”,为其设置新值“False”;“TargetItem”表示目标中继器的数据行,该条件表示要更新目标中继器中“GoodsName”列值与当前数据行“ContrastName”列值相同的数据行;
- 用例动作设置:(图1-198)
6、继续上一步,为“用例1”添加第2个动作,【删除行】中继器“ContrastList”,删除目标选择【This】,表示删除当前项所对应的数据行;
- 用例动作设置:(图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”鼠标悬停效果的实现思路。