AxureRP8实战手册-案例20(中继器:选择对比商品①)

AxureRP8.0教程 小楼一夜听春语 10078℃ 0评论

 案例20. 中继器:选择对比商品(1)

案例来源:

京东-商品列表页

 

案例效果:

  • 添加商品前:(图1-163)

1_163

  • 添加商品后:(图1-164)

1_164

案例描述:

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

 

元件准备:

  • 页面中:(图1-165)

1_165

  • 动态面板“ContrastPanel”中:(图1-166)

1_166

  • 中继器“ContrastList”中:(图1-167)

1_167

  • 中继器“ContrastList”中的数据集:(图1-168)

1_168

  • 动态面板“ItemPanel”中:(图1-169)

1_169

  • 中继器“GoodsList”中:(图1-170)

1_170

  • 中继器“GoodsList”的数据集:(图1-171)

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)

1_172

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

1_173

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

  • 条件判断设置:(图1-174)

1_174

  • 用例动作设置:(图1-175)

1_175

  • 事件交互设置:(图1-176)

1_176

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

  • 交互样式设置:(图1-177)

1_177

  • 用例动作设置:(图1-178)

1_178

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

  • 用例动作设置:(图1-179)

1_179

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

  • 用例动作设置:(图1-180)

1_180

7、为对比栏的“隐藏”按钮的【鼠标单击时】事件添加“用例1”,设置动作为【隐藏】动态面板“ContrastPanel”。

  • 用例动作设置:(图1-181)

1_181

补充说明:

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

特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


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

喜欢 (16)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(22)个小伙伴在吐槽
  1. 小楼老师 请问案例教材有吗?
    黄瓜队长2016-06-28 10:42 回复
  2. 这个案例的素材不全
    老么2016-07-19 15:40 回复
  3. 没有表格 智能自己手打了
    小情兽丶2016-07-21 14:47 回复
    • 小楼一夜听春语
      素材在案例17
      小楼一夜听春语2016-07-23 22:14 回复
      • 案例17中的excel没有这个案例的素材呢。。。
        藤悬木2016-07-25 17:44 回复
  4. 案例22的为啥没有教程?楼大
    慈情义善2016-07-28 18:57 回复
    • 小楼一夜听春语
      ……不明觉厉
      小楼一夜听春语2016-10-30 18:40 回复
  5. 表格可以通过下载案例的源文件获取的
    酸菜2016-10-14 15:08 回复
  6. 小楼老师 想问下这里添加到对比栏 第二个第三个默认的灰色内容消失 这个是在哪里设置 ? 我这边添加了会覆盖内容啊
    幻听2016-10-30 15:35 回复
    • 小楼一夜听春语
      仔细看图169,下载源文件对比。
      小楼一夜听春语2016-10-30 18:39 回复
      • 请问下源文件在哪呀?为啥我添加到对比栏里,商品都是竖着排列,不是横着的呐?
        绘鞋幽默2016-11-02 16:05 回复
      • 经过对比没有任何问题,可就是遮挡不了灰色图片
        bwcq2017-01-25 12:39 回复
        • 小楼一夜听春语
          别那么肯定。要是做的没问题,怎么会不遮挡?仔细看图1-169,里面一共5个元件,你的有几个?其中有个元件是白色的背景矩形,就是用来遮盖的,你的有吗?
          小楼一夜听春语2017-01-25 14:28 回复
  7. 为什么我点击对比,添加的时候,会一下子重复两张商品,小楼老师
    大院子2016-11-10 14:34 回复
  8. 素材里没有GoodsImage,找点儿别的硬凑吧,哈哈
    晓晨2016-11-18 16:35 回复
    • 小楼一夜听春语
      特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。
      小楼一夜听春语2017-01-25 14:33 回复
  9. 有个问题,我做完,标题太长的直接把别的内容挤掉了,怎么解决捏?可以设置成超出一定的字符,就显示省略号不?
    kaidyful2016-12-14 17:17 回复
    • 小楼一夜听春语
      书中有类似案例
      小楼一夜听春语2016-12-14 19:13 回复
  10. 源文件的网址失效了,可否重新给个链接,进行下载,多谢小楼先生!
    菜花依旧2017-01-04 11:46 回复
    • 小楼一夜听春语
      没有失效
      小楼一夜听春语2017-01-05 17:05 回复
  11. 删除按钮的悬停为什么设置了只有移动到删除上才出发,案例中是一入到动态面板内就触发了。
    二大爷2017-05-18 13:31 回复
  12. 动态面板ContrastPanel里边的添加对比怎么做的啊,我这边做出来只有第一个动态面板ItemPanel是成功添加上去了,后边的也没设置是怎么继续添加对比啊@小楼老师
    被坑了2017-06-23 17:38 回复