四、元件案例篇（中继器）（四小时30分钟）

这个篇章比较难，需要首先做过前面的部分，或者掌握基础元件的交互与动态面板的使用后才能学习。学习后对中继器有正确的认识，可以不熟练得使用中继器，只有后面的变量和函数一来，中继器才可以发挥全部实力。

Axure高保真秘笈总述：https://www.jianshu.com/p/cfbc3a7b3f73

1案例16（1小时）

终于到中继器了。

·做法

1、这里需要详细说明一下中继器是干嘛的。

首先，中继器可以重复显示中继器里面的东西。刚拖出来一个中继器，显示如下：

双击进入中继器内部，显示如下：

双击进入中继器内部，显示如下：

这个意思是中继器里面的这个方块，外面显示了三次。如果我们把里面改造一下，外面也会变化，比如：

里面：

外面：

再比如：

中继器里面：

外面：

这样就可以做出淘宝的感觉了。于是，我们首先拖入一个中继器，双击打开，按照元件准备要求的把元件拖入并命名好。

2、中继器的右边栏“属性”中有一个表，如果我们添加一行，刚刚那个123的中继器就会多一个内容

就像这样：

最开始这个1、2、3的数字是怎么来的呢？就是这个属性表列column0给他的。我们也可以这样赋值。具体操作就是案例16的步骤4到8的内容。按照箭头的引导一步一步做就好了。最后会设置成这样：这些设置都是为了把表中的值和中继器的元件显示对应起来。

·说明

原来自学这里的时候觉得特别迷惑，当时也看了一两个教程，但是感觉没什么用，比如这个:https://www.jianshu.com/p/414e8f9bee37但是也没看懂，最后是自己感觉出来了。希望我说的可以懂，不懂的话还得自己查一查。

2案例17（半小时）

一个中继器与动态面板结合的案例

·做法

按照书中描述做就好了，要注意“元件准备”里面有动态面板中和中继器中，都是双击进入后设置的

·说明

我依然是只管了交互，没有管数据。而且为了不在表里面搞很多数据，我就只做了一个数据

3案例18（30分钟）

·做法

照着书做一遍。

·说明

1、toggle是双向切换的选项

2、可以转化为母板，方便以后的使用

4案例19（30分钟）

·做法

看案例19并跟着操作一遍

·说明

1、True和False表上和写函数那里要写成一样，不要打错了

2、案例18和19是一套，如果18没弄清楚19也会比较难办，如果实在弄不清楚，再多弄半小时，也可以先放一放，不影响之后的操作。

3、元件准备处图片的左边和上面有两把尺子，按照他的尺寸设置元件会好一些

4、按住尺子画布中拖动，可以出现基准线

5案例20（1小时）

对中继器、动态面板、条件设置等的综合练习，学习如何在中继器中添加数据。

·做法

1、查看案例效果、描述再往后一翻，发现挺多的

 2、按照元件准备和包含命名说的把元件准备好

3、查看思路分析，重点看第一句，看一遍就行了

4、照着操作步骤操作，红色箭头指向是一步一步的，从左往右从上至下，设置成一样即可，看红箭头比看字舒服

5、预览成功，但是添加对比的不能取消，发现补充说明也这样说了，那没事了

·说明

1、元件名字务必取成一模一样。注意元件准备所说的动态面板中、中继器中等描述意味着动态面板或中继器双击进入之后的设置

2、操作一多初学者很容易就会有疏漏，打错字，漏掉什么都很正常，仔细对比查验，多用预览，做出来后会很有成就感

3、案例21、22都是在案例20的基础之上的改进，所以务必操作一致，我原来自己创新操作，导致后面跟不上浪费了很多时间。名字难打也打一下，按住shift再按字母就可以大写。

4、案例20的contrastList一开始是没有数据的，这一点我开始就没注意到，这个是之后用什么商品对比才出什么数据，才加入什么数据的，注意注意

 

6案例21（30分钟）

通过改变中继器的一个状态变量来模拟不能重复点击的情况。

·做法

照着书做就行

·说明

1、点击case就可以Ctrl c复制，点击其他元件Ctrlv直接粘贴

2、If是直接判断的，ElseIf是首先判断前面的If不成立才判断的

7案例22（30分钟）

中继器更新行、删除行、改变列等操作

·做法

照着做就好了，也可以先自己试试，再看他的做法

·说明

1、现在添加个条件，设置选中这种动作应该已经越来越熟练，可以尝试自己想想咋做

2、一些次要的交互我也不做，感兴趣可以做