如何使用Axure中继器创建复杂的列表（二）

本篇教程，我们继续上篇的内容，教大家创建另外几种复杂的列表，同时介绍如何用中继器实现排版。

实例3：百度糯米的团购列表的创建

我们仍然从中继器的基本部件构造开以及完善该部件所需要的源数据开始。完成后，如下显示：

部件创建以及数据格式的创建与录入

在这里，我们需要注意的是，尽可能用少的组件构成部件，例如对于商品的详细信息，我们仅仅用了一个矩形，同时对各个内容项做了基本的样式调整。因为“距离”的位置不能很好地在该部件中摆放，所以我们单独做了个Lable做标示：

主要内容部件的设置

对于Axure来讲，支持变量存放与文本中，所以在对数据源中的数据绑定到相应部件时，我们以文本+变量的方式，来表现该部件的内容显示：

数据与部件的绑定

在这里有个地方要说明，如果我们在设置数据与部件的绑定绑定时，如果直接将文本的格式（A）选为富文本（Rich Text），则在文本编辑窗口会保留之前在部件中的文本设置样式（B），我们只需要将相应的字段变为中继器中设置的变量（C）即可；如果我们将文本格式选为普通文本（Text），则可以直接插入相应的数据变量，但样式不会保留，当然，我们可以通过这种方式在设置好相应的内容后，再回到事件设置界面（Case Editor），将普通文本转变为富文本，然后修改相应字段的样式即可。

最终显示效果为：

显示效果

当然，我们也可以像上一篇教大家的，可以将商品图标变为图片部件，在数据源中，设置Image变量，通过导入素材，将页面呈现的更像是实际的效果：

添加图片部件与相应字段，，并进行绑定
最终的效果

下面，我们继续讲解一下中继器最后一个没讲到的点——布局。现实中，复杂的列表布局在网页端的使用多过与移动端，但实现方式都大同小异，我们还是通过一个具体的例子进行讲解。

实例4：优酷最佳原创列表

首先我们先按照之前所讲的，构造部件，创建数据源，进行数据与部件的相互绑定，呈现效果如下：

创建基本部件并进行设置

接下来，我们就开始讲解中继器页面属性（Page Properties）的第三项，中继器样式（Repeater Style）

中继器样式设置

这里，我们我们先对这个面板进行下简单的认识，在这个例子中，我们只针对布局样式（Layout）和间隔（Spacing）做设置：我们将列表项以水平（Horizontal）显示，每行显示2个部件，同时，行与行之间的间隔设置为20xp；列与列之间设为4px，现在点击预览，查看一下效果。

最终效果

至此，对于中继器的基础已经讲解完毕，在稍后的教程中，会教大家利用中继器做一些简单地交互，例如数据的删除，添加，更新以及对数据的筛选排序。

有兴趣的朋友可以加我个人微信公众号（微信公众号：产品设计曹蜀黍），一起交流！

微信公众号：产品设计曹蜀黍