多语言展示
当前在线:1026今日阅读:2今日分享:38

Axure设计:利用“中继器”动态加“附件”案例

前两天用一则案例,已经介绍了如何用“中继器“加附件的案例,具体可参考以下链接~虽然便捷,但总有部分的”不完美“,所以,这里用2个”中继器“来完成一个完美的动态加“附件”,动态效果如下:0Axure制作:持续可增加可删减的“附件”案例
工具/原料

Axure RP 8

方法/步骤
1

部分设置及布局,可参考以下链接~可能在此篇中忽略说明,解释~

2

新建2个“中继器”分别设置名为:“add_pic”和“pic”

3

“中继器:add_pic'”属性“中的内容,增加1列”pic“,预设一些”图片“内容,如下图所示

4

“中继器:add_pic'”样式“中的”布局“和”分页“如下图所示:(关键是:每页项目数:1)

5

双击编辑“中继器:add_pic':清空原来默认布局内容;新增一个 “增加”图标即可!并命名为“add”;---就仅一个图标即可,不要小看了这个图标,关键、重点就是“它”了!如下图所示:

6

“中继器:pic'”样式“中的”布局“如下图所示:(每排项目数:5)

7

“中继器:pic'”属性“中的”内容“不用设置任何内容,空着即可,如下图所示:

8

双击编辑“中继器:pic':清空原来默认布局内容;新建1个“图片”,命名:attachment;尺寸:80*80新建1个“工具组”(3个小图标组成),命名:pTool;隐藏---这里仅针对“删除”的图标做交互动作,其他仅为演示效果~布局如下图所示:

9

下面,我们分段看下交互动作~

10

“中继器:pic”的“每项加载时”的动作:---设置“图片:attachment”内容为:[[Item.Column0]]---如下图所示:

11

“图片:attachment”的“鼠标移动时”的动作:---显示“组合:pTool”:置于顶层;弹出效果---

12

“图标:del”的“鼠标单击时”的动作:---删除“此”行---

13

“中继器:add_pic”不用设置“每项加载时”的动作,因为不用展示~如下图所示:

14

重点中的重点,“图标:add”的交互:

15

【Case 1】判定条件:“中继器:pic”的项目数量是否小于10(10这个数目可按需设置,这里演示设置为10)

16

设置“中继器:pic“为局部变量LVAR1所以“中继器:pic”的项目数量:[[LVAR1.Repeater.itemCount]]

17

动作1:'中继器:pic'添加行:column0内容为:[[Item.pic]]如下图所示:

18

动作2:设置'中继器:add_pic'为下一个页面如下图所示:

19

【Case 2】判定条件:“中继器:add_pic”的当前页面等于“中继器:pic”总页面数(说白了,就是“中继器:add_pic”达到了最后一页)

20

“中继器:add_pic”的当前页面:[[Item.Repeater.pageIndex]]“中继器:add_pic”总页面数:[[Item.Repeater.pageCount]]

21

动作:---设置“中继器:add_pic”页面为第一页---如下图所示:

22

哈,到这里,大功告成,是不是也很简单吧~赶紧看下是否如下:

23

觉得不错的话,请投个票,加个赞哦~

推荐信息