快好知 kuaihz

Axure教程|利用中继器做可以翻页的列表

相信所有的产品经理以及有志于成为产品经理的人对中继器都不会很陌生,做为axure的两大高端功能之一,对中继器的了解往往可以检测一个人的axure使用水准。本教程将为大家介绍中继器的使用,相信大家学习之后,在实际工作中可以少求一次他人。

既然说中继器是axure两大难点之一,那么也有必要提一下另一个难点,即函数和变量的组合运用。

当然本文主要讲的是中继器的使用,至于函数和变量可以参照作者以前的文章,这些文章我将在末尾为大家附上链接,有兴趣的读者可以查看。

本案例体验地址:请点击我。

1、认识中继器

中继器可以在元件库的基本元件中找到,作为新版的内容以及最为复杂的元件排在最后一个,将其拖入工作面板之后可以看到如上图所示的初始样式。通过右上角的1我们知道中继器初始就是拥有交互的。

其交互如上图所示,可以看出其交互为设置文字,如果将交互删除,效果如下图所示:

简单来说,即如果删除了交互,列表中的内容将不会被加载,上图中左边为有交互的中继器,而右边则为没有交互的中继器。上面的中继器有1,2,3三个数字,表示该中继器暂时显示了三行,且每一行仅有一个数值。中继器的操作有点类似于动态面板,我们可以双击后进行进一步的设置

2、中继器设置

1. 基本内容的显示

如上图所示,我们双击进入中继器并在中继器中画两个圆,左边的圆命名为1,右边的圆命名为2。接着在中继器设置中为其加上列m,设置m列的元素为a,b,c。这样我们就得到了一个有6个元素的中继器

但现在的中继器没有显示内容的交互,所以发布后没有什么变化,为了实现这个列表的显示,还需要进行一定的设置

设置方式如上图所示,让椭圆1显示第一列的内容,椭圆2显示第二列的内容,这样我们就可以得到最终的效果。

上图为设置后的发布效果,可以发现,在左边和右边依次出现了第一列和第二列的内容,我们填入中继器中的内容通过两个椭圆显示了出来。

2. 添加行

我们在界面中加入一个矩形,然后设置单击后的交互,交互设置如上图所示,单击后添加一个行,第一列的内容为4,第二列的内容为d,让我们试试效果。

3. 标记以及删除

标记的操作如上所示,在中继器中再加一个椭圆,对其进行如上设置。当鼠标点击这个椭圆的时候,选中this,并显示文本“!”表示已经选中了该选项。

接着新增按键删除,删除按键的交互如上所示,删除已经被标记的行。

运行一下如下所示:

3、页面显示设置

如上图所示,在添加行中设置一个交互设置每页数目为5,再增加两个按键1和2,分别表示页面1以及页面二。

为这两个按键分别设置交互,当点击2的时候,设置页面为2。按键1的设置同理。

演示一下设置后的效果:

可以看到,当添加行的时候,行数将会增加,但当行数到达5的时候将不会在本页增加,我们点击1和2 可以发现多余的行切换至了第二页。

总结

本文文字并不多,但对中继器的各种设置基本都有提及,如果想要做更多的效果,那就需要再学习函数以及变量的内容,单靠对中继器的使用是无法完成的。

相关资料

《Axure教程|使用中继器制作可以保存记录的秒表》

《Axure教程|淘宝网商品图片放大镜效果制作》

《Axure教程|完美的Banner轮播效果》

《Axure教程|一个简单的密码判断实例》

《Axure教程|简单但看起来厉害的微信原型》

《有趣的Axure案例:投篮游戏抛物线设计》

《有趣的Axure案例:像素鸟游戏的设计》

《有趣的Axure案例:打地鼠游戏的设计》

《有趣的Axure案例:钓鱼游戏的设计》

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:中继器  中继器词条  利用  利用词条  可以  可以词条  教程  教程词条  列表  列表词条  
原型

 Axure教程 | 常用交互效果...

我们如果想在不同的需求分析,不同的产品设计时,能够随心所欲地使用axure来设计原型,而不必担心如何实现,那么我们必须遵循这样一句话——工欲善其事,必先利其器。...(展开)

原型

 Axure教程:验证码原型制作实...

作者主要针对如何利用Axure制作验证码原型进行了一些分享,希望对大家有所启发。账户的登录注册为了系统的安全,避免恶意的攻击,一般都需要添加验证码,当然有成熟的...(展开)