Axure教程|一次性搞定中继器
这一篇文集名为《Axure进阶之路》自然少不了Axure的难点之一中继器。中继器(repeat)应该算是Axure的三大难点动态面板,函数,中继器中最难的。网上能搜索不少关于中级器的文章,在下狗尾续貂,希望能为大家带来一些新思路。
不想看内容的朋友可以直接跳至文尾下载链接,顺便帮忙点个赞。
![](https://img.haomeiwen.com/i2051268/186e71f4efe950ac.gif)
前言:
相信我,哪些告诉你中继器没用的要么自己会不想让你学,要么自己根本也不懂。
本系列主要用实际的原型绘制来展示中继器的使用,大概包括:
1、中继器的用法
2、中继器的筛选和排序
3、中继器的数据传递
4、中继器的增删改查
5、涉及到的一些有意思的交互。
一、中继器的用法
看教程之前,先认清一个事实:中继器不难。中继器不难。中继器不难。
还有一个事实:中继器虽然不常用,但是很有用,真的很有用。
中继器是汉译之后的称呼,英文原指repeat,就是重复。可以理解为连续重复的项。比如:
![](https://img.haomeiwen.com/i2051268/815f38492c47deee.png)
类似于这样的列表页,每一项拥有相同的元素。例如图中的商品图片(img),商品名称(name),商品价格(price)等等。有这样连续重复的项,中继器正好有了用武之地。
中继器还有什么用?
这是中继器的数据集:
![](https://img.haomeiwen.com/i2051268/73c98a3786875798.png)
这是mysql数据库表:
![](https://img.haomeiwen.com/i2051268/546fa64be702603e.png)
看出来了吗?中继器的数据集和mysql数据库都是数据表结构,字段和记录。
相信我,哪些告诉你中继器没用的要么自己会不想让你学,要么自己根本也不懂。
可以这么说:动态面板是锻炼产品经理在用户交互设计上的能力,函数是锻炼产品经理在业务逻辑和判定实现上的能力,而中继器是锻炼产品经理在数据归纳上的能力。
同意了我的观点,请继续往看下文。
二、建表
本次的示例就是一个商城的商品列表页。程序员在开始项目之前会仔细看产品写的需求文档,然后梳理一下业务逻辑,抽象成代码。其中有一部分就是建库建表。今天我也带大家来建建表。
建表其实就是根据页面元素来填写每一列的表头。
拖入一个中继器——》双击进入——》把小框框删除掉,改为下图样式。这就是每一项重复的样式
![](https://img.haomeiwen.com/i2051268/4881d6e3dc291d45.png)
由上可知,该表涉及四个元素:商品图片(img),商品名称(name),商品价格(sprice),商品销量(sell)。记得给每一项元素命名并且最好和数据集的字段相同。
![](https://img.haomeiwen.com/i2051268/1568988c89f0edd2.png)
也就是四个字段。所以建表如下:
![](https://img.haomeiwen.com/i2051268/ba89e1dae8996b4d.png)
小技巧:建表时可以用excel表格建表,然后直接复制进去。以为axure8.0的中继器数据集的位置让人很蛋疼。
![](https://img.haomeiwen.com/i2051268/108c4463860c0922.png)
三、显示数据
建表之后,将数据显示到对应的元素上,需要添加用例,(每项加载时)设置文本于
![](https://img.haomeiwen.com/i2051268/592d2cf3264fc2d4.png)
例如商品价格:
![](https://img.haomeiwen.com/i2051268/d5d9f6bdb3e348e9.png)
选择右下角——富文本——编辑:
选择右边“插入变量和函数”——》Item.price。(富文本就是可以添加格式的文本,我在此处加入了¥符号,就是让其添加数据时在每一个金额前加上¥,这个也可以加在数据库中或页面元素上,个人觉得我这样最简单)
![](https://img.haomeiwen.com/i2051268/f7eac35007dd850d.png)
一次添加好商品名称和商品销售数量。
添加图片和添加文本的方式稍有不同:
需要选择设置图片,修改默认为值,点击fx,设置其值为Item.img。
![](https://img.haomeiwen.com/i2051268/1c4f64870ed8b461.png)
每一列代表显示界面的一项,可以比较一下显示界面和数据集:(图文来自网络)
![](https://img.haomeiwen.com/i2051268/23a8a10943b38bef.png)
这就是中继器的基本用法,添加重复的项,上下滑动之后的教程会再统一讲。有不懂的可以私信我。
之后还会有中继器的筛选、排序、数据、两种滑动方式、数据传递等等。
还有我之前的文章:《如果你想用最快的方法画原型,那就看看这个》
半夜更新,求点赞。链接:百度云 不放密码了,希望大家可以先自己实践,需要的私信我。
你点的赞是我更新的动力。谢谢阅读。