AxureRP中继器:制作商品列表)

AxureRP8实战手册-案例16(中继器:制作商品列表)

文章来源:AxureRP8实战手册-案例16(中继器:制作商品列表)

慢点

案例16. 中继器:制作商品列表

案例来源:

百度外卖-菜单

 

案例效果:

  • 商品列表:(图1-125)

1_125

案例描述:

包含商品图片、名称、推荐人数、销售数量、价格以及添加按钮的商品模块列表。

 

元件准备:

  • 页面中:(图1-126)

1_126

  • 中继器“GoodsList”中:

1_127

包含命名:

  • 中继器(用于商品列表):GoodsList
  • 文本标签(显示商品名称):GoodsName
  • 文本标签(显示推荐人数):GoodsRecommend
  • 文本标签(显示商品销量):GoodsSales
  • 文本标签(显示商品价格):GoodsPrice
  • 图片(显示商品图片):GoodsImage

 

思路分析:

中继器可用来实现重复的项目列表。可以将自身数据集中的数据通过项目交互与编辑好的元件模板进行绑定;并且,可以调整列表的布局、间距等;

中继器的操作分为以下几步:

  • 在中继器的编辑区中,拖入元件创建单个项目的模板;(操作步骤1)
  • 添加列表的数据、图片到数据集中;(操作步骤2~3)
  • 添加交互将数据集中的数据关联到相应的元件;(操作步骤4~8)
  • 设置中继器的排列布局与间隔。(操作步骤9)

 

操作步骤:

1、参考元件准备中的图1-127拖入元件创建模板,并进行命名;

2、打开本案例素材中的Excel数据表格,复制里面的数据;接下来,回到Axure中,双击中继器“GoodsList”,在检视面板中打开数据集,点中数据集的首行首列,按下快捷键<Ctrl+V>,粘贴数据到数据集中;然后,对应模板中的元件名称为中继器数据集的每一列设置名称;(图1-128)

1_128

3、在“GoodsImage”列中,点击<鼠标右键>,在菜单中选择【导入图片】,对应每行数据将图片导入到数据集中;(图1-129)

1_129

4、在检视面板中,打开交互界面,在【每项加载时】事件中添加“用例1”,设置动作为【设置文本】“GoodsName”为【值】“[[Item.GoodsName]]”;

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

1_130

“[[Item.GoodsName]]”可以直接输入,也可以通过点击【fx】图标,在弹出的编辑界面中,点击【插入变量或函数…】,然后,在打开的列表中选取,插入到值的输入框中;

  • 编辑文本设置:(图1-131)

1_131

5、继续上一步,【设置文本】“GoodsPrice”为【值】“¥[[Item.GoodsPrice]]”;(参考操作步骤4)

6、继续上一步,【设置文本】“GoodsRecommend”为【值】“[[Item. GoodsRecommend]]人推荐”;(参考操作步骤4)

7、继续上一步,【设置文本】“GoodsSales”为【值】“已售[[Item. GoodsSales]]份”;(参考操作步骤4)

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

1_132

8、继续上一步,【设置图片】“GoodsImage”为【值】“[[Item.GoodsImage]]”。

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

1_133

9、在检视面板中,打开样式界面,设置{布局}为【水平】布局,并勾选【网格排布】,设置{每行项目数}为“2”;然后,设置{间距}为{行}“15”{列}“30”。(图1-134)

1_134

补充说明:

从Excel中复制数据到数据集,最后一行会多出一个空行,删除即可。

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

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

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

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

补充说明:

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

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

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

文章来源;AxureRP8实战手册-案例21(中继器:选择对比商品②)

来源

案例21. 中继器:选择对比商品(2)

案例来源:

京东-商品列表页

 

案例效果:

见案例20。

 

案例描述:

在上个案例的基础上(见案例20),添加对重复添加对比商品的限制。

 

元件准备:

  • 在案例20的基础上新增内容:(图1-182)

1_182

包含命名:

  • 见案例20

 

思路分析:

中继器在每项数据加载时,可以通过对列值进行判断对元件进行控制;所以,如果想限制“对比”按钮被点击时,不会重复添加数据,我们可以单独在中继器数据集中添加一列,用于记录选中的状态(见元件准备);然后,通过对这个状态值的判断,进行不同的交互:

  • 如果状态值为“True”,说明商品已添加,该项数据加载时,要对复选框图片进行选中的操作;(操作步骤1)
  • 如果状态值为“False”,说明商品未添加,可以进行添加对比商品信息的操作;(操作步骤3)
  • 每个商品的选中状态值,初始时为“False”,成功添加对比商品信息时,要将状态值更新为“True”。(操作步骤4)

 

操作步骤:

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

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

1_183

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

1_184

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

1_185

2、因为,在上一步中,添加了中继器【每项加载时】对图片“CheckImage”的选中交互;“案例20”中“操作步骤4”所设置的动作就不再需要,将其删除;

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

1_186

3、为“对比”按钮所在动态面板(见上图)的【鼠标单击时】事件添加“用例2”,设置条件判断【值】“IsSelected”【==】【值】“False”;完成条件判断设置后确定保存,退出用例编辑界面;将“案例20”中“操作步骤6”所设置的动作,从图片“CheckImage”的交互中复制到“用例2”中,并删除图片“CheckImage”的交互;最后,在该用例上点击<鼠标右键>,选择【切换为<If>或<Else If>】,将用例的判断转换为“If”格式;

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

1_187

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

1_188

4、继续上一步,在“用例2”中添加第2个动作,【更新行】到中继器“GoodsList”;配置中选择【This】,表示更新当前行;然后,在【选择列】列表中选择“IsSelected”,为其设置新值“True”。

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

1_189

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

1_190

补充说明:

本案例交互流程为:点击“对比”按钮时,会对状态值进行判断;如果状态值为“False”,表示按钮未被选中,这时,将商品信息添加到对比栏,并更新当前商品的“IsSelected”列值为“True”;中继器数据集的数据被更新时会让中继器重新加载数据,从而触发【每项加载时】事件,那么,我们写在事件里的“用例3”就会发生作用,通过判断改变图片“CheckImage”的样式。

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

文章来源:AxureRP8实战手册-案例22(中继器:选择对比商品③)
内容

案例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”鼠标悬停效果的实现思路。

 

标签:
赞  0