axure学习(六)

刚刚跟着视频里的老师学习了中继器的简单实用,这里自己总结一下。

中继器不仅能实现动态效果还有数据交互。

首先拖入中继器,再中继器里拖入如下图所示的控件。所示为给的名称。


axure学习(六)_第1张图片

中继器下面有三个选项栏,数据集,项目交互,格式,数据集就是放数据的地方,这里可以根据自己的需求增加内容。后面两个后面再将。这里我在img列导入了图片,只需要右键 就可以选中导入图像。这里我随意加的图片和文字,重在学习啦,哈哈。结果如下面第2张图

axure学习(六)_第2张图片


axure学习(六)_第3张图片

再新建几个控件,实现交互,实现在输入框输入信息在中继器里添加一行数据,如图:


axure学习(六)_第4张图片

在回复控件上设置交互事件,顺序如下,在中继器里有新增行,打开新增行,有相应的属性列,点击函数插入,找到nichen部件中继器里的name。其余的同样的道理。

axure学习(六)_第5张图片
axure学习(六)_第6张图片

发布出来结果如图:


axure学习(六)_第7张图片
axure学习(六)_第8张图片

这里要说一下,图片没有加进去,在设置是图片那样设置是加载不进去的,但是可以在网页上右键图片属性找到它的相对路径找到,复制到函数里就可以(这里我还没试,因为我没有找到路径,不过老师这样做是对的)

上面说了添加,接下来说删除,需要的效果是点击哪个就删除哪行,这里需要把要删除的先标记,再删除标记项。


需要在中继器里将选中时填充颜色改变,随意就好,只要有效果,然后选择中继器里的取消标记行,然后再点标记行,这样做是为了 ,每次点击时先把上一次的撤销,才会出现单选效果。


axure学习(六)_第9张图片

然后在删除控件上做交互事件,删除已标记的行。

axure学习(六)_第10张图片

这是发布生成出来的的效果,例如点击第一个zhang,再点击下按摩的删除,就会删除该项

axure学习(六)_第11张图片
axure学习(六)_第12张图片
删除后的结果

最后这里提一下,设置单选效果,就是把几个东西放到一组里,在部件属性里设置选项组名称就可以实现单击效果。在中继器里如果没有实现,那可能是如图2中继器那里要取消选中,没实现可能默认勾选了。


axure学习(六)_第13张图片
axure学习(六)_第14张图片

下面总结中继器的数据更新

新建修改的控件,附上名称,在中继器里添加编辑标签,设置交互事件,点击此标签,将中继器里的部件文字显示到修改的相应控件上。


axure学习(六)_第15张图片


axure学习(六)_第16张图片

点击修改设置交互,找到中继器里的更新行,点击中继器,下面的规则函数是对xiugainihcen用的,在xiugainichen文本框输入要修改的昵称名,即可修改内容。若点击已标记,点击下面选择列的value函数,将bj里的内容给中继器里的neirong。

axure学习(六)_第17张图片
axure学习(六)_第18张图片
已标记。选项列value函数
axure学习(六)_第19张图片
规则

点击编辑在修改框里有相应的内容(这里选的是已标记)

axure学习(六)_第20张图片
发布出的原型

修改内容后点击修改,原内容被修改。

axure学习(六)_第21张图片

选择规则的话这样设置交互后,


axure学习(六)_第22张图片

发布原型

在图片旁边的文本框直接输入昵称,再在编辑里输入想修改的文字即可完成对此昵称下的内容修改。

axure学习(六)_第23张图片

你可能感兴趣的:(axure学习(六))