案例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）

补充说明：

• 本案例不对重复添加以及添加数量进行限制，此类功能将在之后的案例中进行讲解；
• 本案例未包含效果图片中左侧的推荐内容。

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

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

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

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