美文网首页产品经理
四、元件案例篇(中继器)(四小时30分钟)

四、元件案例篇(中继器)(四小时30分钟)

作者: 狐狸_d5ae | 来源:发表于2019-12-11 11:13 被阅读0次

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

    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分钟)

    ·做法

    照着书做一遍。

    ·说明

    1toggle是双向切换的选项

    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、一些次要的交互我也不做,感兴趣可以做

    相关文章

      网友评论

        本文标题:四、元件案例篇(中继器)(四小时30分钟)

        本文链接:https://www.haomeiwen.com/subject/gprogctx.html