AxureRP8实战手册-案例16（中继器：制作商品列表）

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

案例来源:

百度外卖-菜单

案例效果：

• 商品列表：（图1-125）

案例描述：

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

元件准备：

• 页面中：（图1-126）

• 中继器“GoodsList”中：

包含命名：

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

思路分析：

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

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

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

操作步骤：

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

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

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

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

• 用例动作设置：（图1-130）

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

• 编辑文本设置：（图1-131）

5、继续上一步，【设置文本】“GoodsPrice”为【值】“￥[[Item.GoodsPrice]]”；（参考操作步骤4）

6、继续上一步，【设置文本】“GoodsRecommend”为【值】“[[Item. GoodsRecommend]]人推荐”；（参考操作步骤4）

7、继续上一步，【设置文本】“GoodsSales”为【值】“已售[[Item. GoodsSales]]份”；（参考操作步骤4）

• 用例动作设置：（图1-132）

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

• 用例动作设置：（图1-133）

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

补充说明：

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