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

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

案例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中复制数据到数据集,最后一行会多出一个空行,删除即可。

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


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

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

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

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


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例16(中继器:制作商品列表)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 小楼老师,麻烦问下你截图中的红色带箭头的虚线是如何画的? 谢谢
    小C2016-06-22 14:20 回复
    • axure里面自带的
      multcl2016-08-02 17:02 回复
  2. 小楼老师,请问 中继器里的图片格式必须得是 .png 格式么? 我用.jpg的怎么都显示不出来。
    qingbo02192016-08-25 16:03 回复
  3. 小楼老师,看了你的(免费)视频和一些教程,但是没有找到数据集与数据库是如何连接交互的内容,这块是我最主要的需求,能指点一下么,收费也没有问题的,谢谢!
    zhangzhang2016-08-29 07:14 回复
    • 小楼一夜听春语
      原型不是用来开发项目的,连不了数据库。
      小楼一夜听春语2016-08-29 11:36 回复
  4. 我肿么木有找到案例素材捏 🙁
    蛋蛋2016-09-22 15:04 回复
    • 小楼一夜听春语
      看正文最后一行,红字特别提醒。如果还找不到,点浏览器右上角的最后一个按钮就行了。
      小楼一夜听春语2016-09-22 16:29 回复
  5. 小楼老师,我得图片有一张显示得和其他图片不齐,是怎么回事?如何解决 😀
    河边的鹅卵石2016-09-28 20:15 回复
  6. 预览的时候价格后面怎么会多出一个“个”字,发布HTML后查看又没有了 😮
    波波2016-10-13 14:26 回复
  7. 分页怎么设置?我按网上教程,商品信息就显示不出来,只是一个数据项,求大神帮助
    Greyjoy2016-12-07 16:12 回复
  8. 小楼哥,怎么添加图片啊,怎么都是失败的。
    深巷明朝卖杏花2017-01-11 11:52 回复
  9. 为什么当已售的数量很多的时候,图片会发生错位
    芒果不思议2017-10-03 19:06 回复