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

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

案例22. 中继器:选择对比商品(3)

案例来源:

京东-商品列表页

 

案例效果:

  • 取消/删除时:(图1-191)

1_191

  • 清空对比时:(图1-192)

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)

1_193

2、为“清空对比栏”按钮的【鼠标单击时】事件添加“用例1”,设置动作为【删除行】中继器“ContrastList”,删除目标选择【条件】,{条件}中填写“True”;“True”表示该中继器数据集中每一个数据行都符合删除条件;

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

1_194

3、继续上一步,为“用例1”添加第2个动作,【更新行】到中继器“GoodsList”;更新目标选择“条件”;{条件}中填写“[[Item.IsSelected==’True’]]”;点击【选择列】,选择“IsSelected”,为其设置新值“False”;

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

1_195

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

1_196

4、“对比”商品信息中的删除按钮“DeleteButton”默认为白色,在元件属性中设置【鼠标悬停】的交互样式,设置字体颜色为蓝色;在动态面板“ItemPanel”的元件属性中勾选【允许触发鼠标交互】,这样鼠标只要进入动态面板范围内,就会触发“DeleteButton”的【鼠标悬停】交互样式,呈现蓝色可见状态。(图1-197)

1_197

5、为对比商品信息中删除按钮“DeleteButton”(图1-197)的【鼠标单击时】事件添加“用例1”,设置动作为【更新行】到中继器“GoodsList”;更新目标选择“条件”;{条件}中填写“[[TargetItem.GoodsName==Item.ContrastName]]”;点击【选择列】,选择“IsSelected”,为其设置新值“False”;“TargetItem”表示目标中继器的数据行,该条件表示要更新目标中继器中“GoodsName”列值与当前数据行“ContrastName”列值相同的数据行;

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

1-198

6、继续上一步,为“用例1”添加第2个动作,【删除行】中继器“ContrastList”,删除目标选择【This】,表示删除当前项所对应的数据行;

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

1-199

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

1-200

7、为“对比”按钮的动态面板,添加“用例3”;这时,软件会自动关联“用例2”,设置条件为“Else If”,即不满足“用例2”的条件的情形;添加动作【更新行】到中继器“GoodsList”;更新目标选择【This】;点击【选择列】,选择“IsSelected”,为其设置新值“False”;

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

1_201

8、继续上一步,设置动作为【删除行】中继器“ContrastList”,删除目标选择【条件】,{条件}填写“[[TargetItem.ContrastName==Item.GoodsName]]”;这个条件表示删除目标中继器中“ContrastName”列值与当前数据行 “GoodsName” 列值相同的数据行。

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

1_202

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

1_203

补充说明:

本案例中未对商品列表其它交互进行设置,比如鼠标进入商品信息区域显示带阴影的背景矩形;该效果大家可以参考本案例中元件“DeleteButton”鼠标悬停效果的实现思路。

 


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

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

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

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


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

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 小楼老湿,步骤5-6那块是不是有点问题啊,我觉着是应该先更新行再删除行吧,要不先删除的话数据都没了,怎么进行筛选啊。反正我试了几次是先更新再删除才行,先删除再更新的话没效果。
    举个栗子2016-07-06 17:10 回复
    • 是的 顺序搞错了 已经修正了 谢谢
      小楼一夜听春语2016-07-06 22:25 回复
      • 小楼老湿辛苦了,一点小差错在所难免,这么给力的案例实属业界良心!京东这几期的效果我都按照教程做出来了,但还是很想把对比栏只限制四个商品添加那个效果做出来,思考了半天不得门路,希望小楼老湿出个教程啊,谢谢了! 😀
        举个栗子2016-07-07 15:18 回复
        • 这个在书中有进一步讲解
          小楼一夜听春语2016-07-23 22:10 回复