这个篇章比较难,需要首先做过前面的部分,或者掌握基础元件的交互与动态面板的使用后才能学习。学习后对中继器有正确的认识,可以不熟练得使用中继器,只有后面的变量和函数一来,中继器才可以发挥全部实力。
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、一些次要的交互我也不做,感兴趣可以做
网友评论