axure商城

我用 Axure 做了一个云盘

以下是云盘界面的截图,有兴趣的朋友可以通过原型体验一下,传送门>>

我用 Axure 做了一个云盘

本文主要分享这个项目的设计中最核心的两个要点:如何用 Axure 中继器实现目录分级和动态路径。

目录分级

我们在资源管理器或云盘中访问一个文件的时候,如果这个文件被放在多个文件夹下,我们需要一层一层展开文件夹,直到找到文件为止,这个层层嵌套的结构,就是目录分级。

接下来看一下在 Axure 中,如何实现这样的效果。

首先在工作区添加一个中继器,里面放一个文件夹的图标,图标下放一个文本,用来显示文件夹名称,如下:

我用 Axure 做了一个云盘

中继器的结构和数据如下:

我用 Axure 做了一个云盘

file_name 是目录名称;id 是当前目录的唯一标识;parent_id 是当前目录的上一级目录的唯一标识。

这里想要实现的效果是在根目录下有一个“新建文件夹 1”目录,“新建文件夹 1”下有两个目录,分别是“1.1”和“1.2”,“1.1”下又有两个目录,分别是“1.1.1”和“1.1.2”

但填入数据之后我们会发现,所有目录都在同一级,并没有按我们的想法进行分级:

我用 Axure 做了一个云盘

别急,接下来的操作才是重点。

首先,我们添加一个全局变量 search_id,用来保存当前正在访问的目录的 id(默认值为0,也就是说,初始化的时候,访问的是根目录):

我用 Axure 做了一个云盘

接着,我们给中继器添加载入时进行筛选的交互,筛选条件就是 parend_id = search_id:

我用 Axure 做了一个云盘

在浏览器中预览就可以看到现在只显示根目录下的“新建文件夹 1”一个目录:

我用 Axure 做了一个云盘

最后一步,我们要来实现点击目录的时候,打开当前目录的下一级的效果。

进入中继器,选择中继器内的文件夹图标,给图标添加单击事件,首先将当前点击的目录的 id 赋值给 search_id,然后触发中继器的载入事件:

我用 Axure 做了一个云盘

这样中继器会按新的 id 重新筛选一次,就能够实现出逐层打开目录的效果:

我用 Axure 做了一个云盘

动态路径

动态路径的核心是一个面包屑,我们访问目录时,每往下一层,就需要增加一层路径,因此,我们可以利用中继器的添加行交互来完成。

在刚刚的项目中,再添加一个中继器,放在目录上方:

我用 Axure 做了一个云盘

中继器內添加一个按钮,作为路径的一级:

我用 Axure 做了一个云盘

中继器共两列:

我用 Axure 做了一个云盘

file_name 用来保存路径名,id 用来保存路径的唯一标识,中继器內添加一行根目录的默认数据。

由于我们是展开目录的时候添加路径的,所以交互还要到目录的中继器內去写,找到中继器内的文件夹图标,在原有的单击事件中添加交互:

我用 Axure 做了一个云盘

点击的时候,给路径的中继器添加一行数据,路径名和 id 分别是当前目录的文件名和 id。

完成之后我们可以来看看效果:

我用 Axure 做了一个云盘

接下来我们还需要添加一个功能,就是通过路径直接回到历史访问过的任意一级目录,由于我们在路径的中继器中保存了每一级路径的 id,所以可以很轻松地通过 id 来返回到历史路径的任意一级目录。

进入路径中继器,给中继器內的按钮添加单击事件:

我用 Axure 做了一个云盘

这里将路径的 id 赋值给 search_id,然后触发目录中继器的载入事件,就可以实现跳转到指定目录的效果,同时需要注意,跳转回历史路径的时候,需要删除掉后面的路径,这里只需要将序号(index)大于当前序号的数据删掉即可,再来看看效果:

我用 Axure 做了一个云盘

以上便是本文的全部内容,感谢阅读!

给TA打赏
共{{data.count}}人
人已打赏
Axure教程

【Axure中继器】利用中继器的“监听”事件实现时钟的效果

2023-12-29 18:47:08

Axure教程案例教程高级教程

Axure 实现智能客服关键词自动回复效果

2024-1-16 15:43:34

axure商城
2 条回复 A文章作者 M管理员
  1. 何以青春

    学习了,给作者点赞~

  2. 黄老师
    黄老师给作者打赏了¥5
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索