【转】AxureRP8实战手册-案例20（中继器：选择对比商品①）
AxureRP8实战手册-案例20（中继器：选择对比商品①）
案例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”的数据集中，并通过【每项加载时】的交互动态的显示到对比栏中；
- 用例动作设置：（图1-180）
7、为对比栏的“隐藏”按钮的【鼠标单击时】事件添加“用例1”，设置动作为【隐藏】动态面板“ContrastPanel”。
- 用例动作设置：（图1-181）
补充说明：
- 本案例不对重复添加以及添加数量进行限制，此类功能将在之后的案例中进行讲解；
- 本案例未包含效果图片中左侧的推荐内容。
特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。
转载请注明：Axure原创教程网 » AxureRP8实战手册-案例20（中继器：选择对比商品①）
补充笔记：
ContrastPanel从页面最底端弹出，要配置 隐藏及固定到浏览器 底端；
每选择一个对比项隐藏原来的灰色方框的方法：将对比中继器ContrastList至于顶层。