多语言展示
当前在线:145今日阅读:167今日分享:16

Axure制作:持续可增加可删减的“附件”案例

今天做一互动,按“增加”图标,可增加一些“附件”图标出来,也可以删除这些“附件”图标,具体效果如下:
工具/原料

Axure RP 8

方法/步骤
1

新建2个'图标:加号'和1个中继器,如下图所示:

2

设置1个'图标:加号'为add1设置1个'图标:加号'为add2;隐藏;置于顶层设置'中继器'为隐藏

3

两个'图标:加号'重叠在一起布局如下图所示:

4

中继器内部布局:

5

删除内部原有内容;新建一个图片新建一个”图标:删除“布局如下:

6

设置'图标:删除'为del;隐藏;不透明度:50%设置图片尺寸:80*80;鼠标悬停时,不透明度:20%---(这里演示的”pTool“是个组合,是“预览”、“图标”、“删除”3个图标的组合,因为”预览“和”下载“,但没有做交互动作,所以下面不再累述了)

7

另,需要给“中继器”加入一列内容,通过“导入”方式,存放一些数量的“附件”图标……如下图所示:---(具体图标存放数量,取决于演示的方式)

8

以下是交互动作,很简单……

9

“图标:add2”的“鼠标单击时”动作:---设置中继器每页显示项目数量---

10

设置“元件:中继器”为局部变量LVAR1所以所需设置的数量值为:[[lvar1.visibleItemCount+1]]

11

“图标:add1”的“鼠标单击时”动作:---显示”中继器“显示”图标:add2“---

12

“中继器”的“每项加载时”动作:---设置”图片“内容---

13

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

14

“图标:del”的“鼠标单击时”动作:

15

判断“中继器”显示数量等于1

16

动作:---隐藏”中继器“隐藏”图标:add2“---

17

除此之外的动作:---1.删除此内容2.设置每页显示的项目数量:[[Item.Repeater.visibleItemCount-1]]---

18

全部设置完后,验证下效果吧……

19

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

推荐信息