【转】AxureRP8实战手册-案例20（中继器：选择对比商品①）

AxureRP8实战手册-案例20（中继器：选择对比商品①）

AxureRP8.0教程小楼一夜听春语 4年前 (2016-06-27) 15103℃ 0评论

案例20. 中继器：选择对比商品（1）

案例来源:

京东-商品列表页

案例效果：

添加商品前：（图1-163）

添加商品后：（图1-164）

案例描述：

点击某个商品的“对比”按钮时，页面下方向上滑出对比栏，选中的商品将在对比栏中出现。点击对比栏“隐藏”按钮时，关闭对比栏。

元件准备：

页面中：（图1-165）

动态面板“ContrastPanel”中：（图1-166）

中继器“ContrastList”中：（图1-167）

中继器“ContrastList”中的数据集：（图1-168）

动态面板“ItemPanel”中：（图1-169）

中继器“GoodsList”中：（图1-170）

中继器“GoodsList”的数据集：（图1-171）

包含命名：

中继器（用于商品列表）：GoodsList
中继器（用于对比列表）：ContrastList
图片（用于商品列表的商品图片）：GoodsImage
图片（用于商品列表的促销图标）：PromotionImage
文本标签（用于商品列表的商品价格）：GoodsPrice
文本标签（用于商品列表的商品名称）：GoodsName
文本标签（用于商品列表的商品简介）：GoodsSynopsis
文本标签（用于商品列表的评论数量）：CommentNumber
图片（“对比”按钮的复选框图标）：CheckImage
动态面板（用于对比栏的位置固定以及显示/隐藏）：ContrastPanel
动态面板（用于对比列表悬停显示“删除”按钮效果）：ItemPanel
文本标签（用于显示对比商品名称）：ContrastName
文本标签（用于显示对比商品价格）：ContrastPrice
文本标签（用于对比列表删除按钮）：DeleteButton
图片（用于对比商品图片）：ContrastImage

思路分析：

中继器可以动态的添加数据。本案例中对比列表的信息可以动态添加，就可以通过中继器来实现。

本案例中的中继器“GoodsList”，并非所有的商品都显示促销图标“PromotionImage”；我们可以在中继器数据集中添加“IsPromotion”列，并预先设置好列值；中继器载入每一行数据时，根据 “IsPromotion”列的值是 “True”还是“False”，决定其是否显示。（操作步骤2~3）
点击“对比”按钮时，要让复选框切换样式（操作步骤4）；
点击“对比”按钮时，要让对比列表从底部向上滑出；（操作步骤5）
“对比”按钮的复选框选中时，要向对比列表添加一条商品信息；（操作步骤6）
点击对比栏中的“隐藏”按钮时，关闭对比栏。（操作步骤7）

操作步骤：

1、参考案例16以及本案例元件准备，完成中继器“GoodsList”与“ContrastList”的设置以及【每项加载时】事件的交互；

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

2、设置图片“PromotionImage”默认为显示的状态；然后，在元件属性中，设置该元件的【禁用】时的交互样式为{不透明(%)}“0”,这样禁用该元件时，该元件则完全透明不可见；（图1-173）

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

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

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

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

4、在元件属性中为图片“CheckImage”添加【选中】的交互样式，导入被选中样式的图片；然后，为该元件所在的动态面板【鼠标单击时】事件添加“用例1”，设置动作为【切换选中状态】“CheckImage”；

交互样式设置：（图1-177）

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

5、继续上一步，添加第2个动作为【显示】动态面板“ContrastPanel”，{动画}为【向上滑动】，持续{时间}“500”毫秒；

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

6、为图片“CheckImage”的【选中时】事件添加“用例1”，设置动作为【添加行】到中继器“ContrastList”；配置中点击【添加行】的按钮，再打开的界面中添加一行数据，对应列名分别填入“[[Item.GoodsName]]”、“[[Item.GoodsPrice]]”和“[[Item.GoodsImage]]”；这样就将当前被选中的商品的信息读取出来，添加到了中继器“ContrastList”的数据集中，并通过【每项加载时】的交互动态的显示到对比栏中；