Axure中继器介绍

发布于:2024-09-18 ⋅ 阅读:(5) ⋅ 点赞:(0)

中继器我们一般在处理重复性比较高的任务时,能让我们达到事半功倍的效果,中继器在整个axure中属于复杂程度比较高的功能,我们今天大致讲一下常用的方法即可。

一、声明一个中继器

默认展示为三行。
在这里插入图片描述
点击样式,这里我们可以添加删除它的行数,还可以对中继器内部的文字做一些编辑工作。
在这里插入图片描述
建立一个商品描述框,并将其放在中继器中。
在这里插入图片描述
双击中继器就可以进入到中继器内部,跟动态面板是一样的操作。
这里要注意的是,当进入中继器内部时,要将原本的框框删掉,不然无法将商品描述信息复制进去,最终如下图展示就行了。
在这里插入图片描述
完成后我们发现是三行展示,因为刚刚上面讲过,中继器默认是展示三行的。这里我们将其删掉只保留一行。
在这里插入图片描述
我们讲商品名称,商品描述、价格都起一个别名。分别为【商品名称】【商品描述】【价格】,这样做是为了后面这些信息我们都动态将其生成。
我们再在中继器样式里面添加三列,分别对应商品名称、描述、价格。
在这里插入图片描述
我们在对应的列下面写入相应的展示信息。
在这里插入图片描述
以上做完之后呢我们还是无法在中继器中看到实际的变化,这是因为我们还需要做一个交互。将中继器列名与我们的商品信息进行一个交互。
选中中继器,我们可以看到中继器交互,这里我们选择每项加载。
在这里插入图片描述
这里选择设置文本。
在这里插入图片描述
这里选择对应的商品信息,上方我们定义过的。
在这里插入图片描述
这里我们添加函数,就是刚刚我们设置的中继器对应商品信息的列名。
在这里插入图片描述
这里我们可以中继器数据集,这里我们选择我们需要的列。
在这里插入图片描述
后面的商品信息我们都依次这样做,最终效果如下。
在这里插入图片描述
这样做完以后呢,我们后续添加商品信息就变得非常简单了,我们直接点击中继器,在样式里面添加行就行了。
在这里插入图片描述

二、对中继器内容进行排序

我们先给中继器命一个别名叫【商品列表】,添加一个排序按钮,这里以商品价格从高到低排序。
定义交互,选择单击时。
在这里插入图片描述
再点击添加排序,选择对价格进行排序。这样排序功能就生效了。
在这里插入图片描述

三、添加商品

我们在增加一个添加商品的功能,新建一个增加商品的弹框,并将其设置为动态面板。输入框依次命名为【商品名称】【商品描述】【商品价格】
在这里插入图片描述
我们将此动态面板设置为隐藏。点击添加商品按钮将其展示,点击取消按钮将其隐藏。
接下来我们给提交按钮做一个交互,当单击时我们添加行。
在这里插入图片描述
添加行时我们选择中继器商品列表。
在这里插入图片描述
再点击添加行。
在这里插入图片描述
对应的中继器的列名,后续将变量值都赋值给对应的列。
在这里插入图片描述

给对应的商品描述设置局部变量,所谓的局部变量其实就是商品弹框对应的名词。
依次进行如下操作。此操作主要是将添加商品弹框输入信息值交给中继器对应的列。
在这里插入图片描述
当点击提交完后我们需要再隐藏弹框。
在这里插入图片描述
为了确保下次再次打开弹框,对应的输入框没有数值我们需要将所有的输入框置为空。依次如下做名称、描述、价格。
在这里插入图片描述
最终展示是这样。这样就能实现添加功能。


网站公告

今日签到

点亮在社区的每一天
去签到