编辑导读：Web产物的单选组件在画原型的时候较量常见，所以产物司理有须要深入相识它的各类交互和对应的原型画法。本文作者从自身实践履历出发，分享了用Axure做出Web产物的列表组件的基本画法，供各人一同参考和进修。

除了通过表格来画出简朴列表之外，我们还可以通过中继器来画出列表，相应的原型结果请查察：。

别的作者单独写了一篇文章具体先容列表组件的高级交互，有乐趣的同学可以扩展阅读：如何用Axure画出Web靠山产物的列表组件：高级交互。

01 利用中继器画出列表

假如仅需演示列表结果无需填凑数据，请按照下述步调举办操纵。

1、先思量清楚列表包括几多个字段。从默认元件库拖动相应数量的“矩形1”到画布符合位置，修改成符合尺寸。

2、同时选择列表头的所有字段名，发起修改为“左侧对齐”，填充颜色修改为#F2F2F2，即之一排倒数第二个颜色。线段颜色修改为#D7D7D7，即之一排倒数第三个颜色。

3、同时选择列表头的所有字段名，右键点击“设为组合”，然后在右侧边栏配置组合的名称“列表字段名”。

4、从默认元件库拖动“中继器”到列表头的下方符合位置，定名为“列表字段值”。假如不消填凑数据，发起点击右侧边栏“交互”，删除默认的“每项加载时”事件。

5、双击该中继器进入内部，从默认元件库拖动相应数量的“矩形1”到画布符合位置，修改成符合尺寸。发起修改为“左侧对齐”，线段颜色修改为#D7D7D7。

02 填充演示数据到列表

如需填充演示数据到列表中，请按照下述步调举办操纵。

6、按照需求，修改列表所有的字段名，以及大概需要调解字段的数量。

7、点击“列表字段值”中继器，右侧边栏切换到“样式”，点击数据区域的图标“右侧添加行”按钮，多次点击直到数量和列表字段数量沟通。

8、在“数据”中输入演示数据，可以一个一个举办编辑。同时也支持从excel中复制列表数据到这里。

9、点击“列表字段值”中继器，右侧边栏切换到“交互”，点击“新建交互”按钮，选择触发条件“每项加载时”，添加行动“配置文本”，方针选择“字段值1”，点击值后头的fx，进入“编辑文本”弹窗，删除输入框中的值，然后点击“插入变量或函数”选择item.Column0，然后点击“确定”按钮。

10、点击“配置文本”行动后头的“添加方针”，然后选择“字段值2”，同理配置它的值为item.Column1。

11、直到配置出最后一个“字段值6”，同理配置它的值为item.Column5。

12、思量到商品名称较量长，需要调解下相应的列表项字段名和字段值的宽度担保不需要换行展示。

13、点击“预览”按钮，然后在欣赏器中查察原型结果。

#相关阅读#

如何用Axure画出Web产物的单选组件

如何用Axure画出Web产物的菜单栏组件

如何用Axure画出Web产物的面包屑组件

如何用Axure画出Web靠山产物的编辑详情页

如何用Axure画出Web靠山产物的列表组件：高级交互

#专栏作家#

荡子，小我私家微信langzipm，公家号：荡子画原型(langzisay)。专注于Axure原型设计和产物类型。