如何使用Axure中继器做出商品列表

例子：做出如下效果

2DEEA28B-7642-48D5-927B-B6BCB5A867B8.png

1. 点开Azure软件——新建文件----添加一个页面起好名字（选中后单击鼠标右键可以输入）

   
   
   

   A236E62B-7166-4B3A-8C7D-517FBC5436E3.png

2. 双击可以打开这个刚建好的空页面
   

   E8EB6175-C42E-4904-AA6F-2137C732AB2E.png
   
   
   3.在元件库选择Default，找到 中继器 ，直接可以拖拽出来
   

   CFE6C807-AF13-4F8D-AF63-FC82F564C089.png

3. 在整个界面的最右侧，点击样式：
   

   09A45793-B01D-4E89-B244-45DAA9C1CFF2.png

5.选择属性面板，可以直接输入，增加个数

5714AFE2-E774-4957-8917-3FC985BAA526.png

6. 双击 中继器 ，进入其中一个框，进行编辑
   

   70AE655F-CE49-4E9A-BB70-6ABFF0E6F53F.png

7. 添加图片占位符，添加字体，添加数字等等信息
   

   EF978EEE-21A0-4101-9E8A-93EBB954691F.png

8. 点击中继器所在页面，可以看到界面变成如下：
   

   8FAEC3FE-C058-4688-99D7-55B81D092CA1.png
   
   

   9.回到中继器内部的页面，单击图片，字体等等，在界面最右侧修改自己能够识别的名字（最好是用英文，或者是拼音，方便后面使用；不管是图片还是文字等等，都要命名好名字）

   
   
   

   CCF702B6-BB30-4EE0-8F56-0F54472D0EF2.png
   
   
   

   C5105938-164D-463F-AD22-DCFDDE9252F2.png

10. 修改名字（用英文或拼音，自己能识别就可以，不可以用中文，输入的时候，输入法要切换为英文，不可以用中文的输入法输入英文），列表下面的各个标题的名字修改一下。

    
    
    

    2E2AC10F-0F9F-4C93-8C88-7B97DBAFCD0A.png

11. 修改内容如下

    
    
    

12. 上一步点击确定以后，中继器就变成如下：（名字都被修改了）

    
    
    

    92863644-41D6-4455-A281-A8A997E36849.png
    
    

    勤快一点都改一下名字，可以全部变成对应的名字

    
    
    

    CCD373C6-9157-463C-9ED1-ABD08DCF430F.png

13. 价钱的修改也是一样的，具体如下：
    在界面最右侧属性当中，点击添加列 ，编辑名字，填写每一个商品的价格

F7CF7E40-5DC8-4B2B-8389-DCBA0849CCC0.png

7FF02C2B-723E-44E1-AFA2-5EC6C1A2AD59.png

14. 按照下面顺序进行
    

    B162F3E1-CC0C-4E2B-BB85-558B1EFB99F1.png

15. 添加图片也是一样的
    

    同理，添加列——
    

    C2A8BB57-5477-437F-87EC-B68FA485A584.png
    点击鼠标右键可以导入图片，接下来设置如下，只不过把图片改为“值”

793F1CC5-8BEF-4BD4-A5C9-9824D2A89D8A.png

16.如果所有信息填写的比较完整，效果可以呈现出来：

C2ED6422-86C0-47B4-831A-1393155F056A.png

预览效果：

2DEEA28B-7642-48D5-927B-B6BCB5A867B8.png