编辑导读：中继器是axure的重要组件，可以很好地模仿数据库增删改查的操纵。本文以网红年糕展示页面为例，先容中继器模仿某宝商品展示栏的具体步调，但愿对你有辅佐。

本文以某宝热搜第二名的网红年糕展示页面为例（好有食欲看饿了），首先阐明一下每条信息的构成，可以看到是由商品图片、商品名称、净含量、价值、付款人数、店肆名称/发货所在、购物车图标构成，按照这些组件先来搭建中继器。

之一步，拖拽一其中继器组件，单击进入中继器页面。

第二步，删除中继器的默认矩形组件，凭据 *** 信息的构成搭建各元件。首先拖拽图片元件、尺寸170*170，定名为商品图片；拖拽文本标签、定名为商品名称；拖拽文本标签，定名为净含量，字体配置为12号、颜色配置为CCCCCC；拖拽文本标签，定名为价值、字体颜色FF0000；付款人数文本标签、颜色CCCCCC；店肆名称文本标签，字体12、颜色CCCCCC；购物车图标尺寸20*20、定名为购物车图标。

整体机关如图所示：

第三步，为中继器添加数据，由于axure中继器添加数据很是贫苦，可以在excel中建号数据后复制粘贴过来，excel中数据设计如下图所示：

Axure中继器中数据显示:

第四步，数据导入后，需要将axure中继器中数据和页面展示的内容绑定起来，以商品名称为例：

单击每项加载时，添加行动如下：配置文本->勾选商品名称->单击fx->插入变量或函数->选择Item.name，其他文本标签也同样和中继器中数据content、price、sale、location一一对应起来。

文本框和中继器中数据一一对应后显示如下：

接下来要做的是把图片添加到中继器中。首先右键单击需要导入图片的位置，如下图红框所示，右键单击后选择导入图片，即可实现中继器中导入图片。同样原理，在icon位置导入购物车图标。

和文本一样，中继器中导入图片后，需要举办关联操纵在页面中展示出来。为交互<每项加载时>添加用例，单击配置图片->勾选购物车图标->Default选择值->单击fx->插入变量或函数->选择中继器中数据Item.icon。商品图片的关联操纵同上。

单击宣布预览一下结果，一个简朴的用中继器模仿 *** 商品列表的页面就做好啦，酱酱！

总结一下容易呈现错误的处所，首先以上操纵都是在中继器页面举办的，这个不要搞错；其次中继器的列名是英文单词定名，假如是中文的话会堕落。这个页面较量简朴，容易堕落的处所也就这些，很是适合中继器入门进修，中继器的应用照旧许多的，下次来一起用中继器做穿梭框吧！