Axure技巧:移动行插入行的实现方法

0 评论 4195 浏览 13 收藏 7 分钟

编辑导读:本文作者从自身工作经验出发,介绍中继器中Item与TargetItem的区别,以及如何实现移动行插入行的效果。本文适合对中继器中的数据集与元件间的映射逻辑、更新行和添加排序有简单了解的读者。

一、前言

在项目中因为有移动行和插入行的需求,为了更直观、具体的体现该效果,便想在Axure中实现出来。

在网上搜索相关资料与教程,发现涉及到TargetItem对象,但没有理解其应用原因及原理,在深入了解了TargetItem对象后,最终实现了效果。现把自己理解的总结出来,供大家参考。

二、效果

在上方插入:可在任意一行,点击相应图标后,在该行的上方插入一行。

在下方插入:可在任意一行,点击相应图标后,在该行的下方插入一行。

上移:可在任意一行(除第一行),点击相应图标后,将该行的上移一行。

下移:可在任意一行(除最后一行),点击相应图标后,将该行的下移一行。

三、思路

不难发现,四种效果本质上都是“改变位置顺序”。

如果我们把所有行的位置顺序按12345…的“顺序号”依次排下去。那么以“在下方插入”为例,如:在1下方插入一行,可以简单的分为三个步骤:

四、实现

按照以上思路,我们在数据集中增加一列“OrderNum”来存储“顺序号”。

可能这里有童鞋会问,为什么不直接用index? 因为index只能递增,不能对其进行排序。

第一步更新行

首先找到1下面的23456……

这就引出TargetItem的作用。从名称上也能大概理解为“目标项”。没有“Target”前缀的Item,我们知道是指“当前项”,如第一行的顺序号Item.OrderNum=1。而应用了条件时,TargetItem可以表示所有符合条件的项。所以23456……就是符合“在1下面”这个条件的TargetItem.OrderNum。

而“在1下面”这个条件要如何表达呢?我们发现1下面的23456…都是大于1的,所以条件可以这么写:[[TargetItem.OrderNum>Item.OrderNum]]。

然后,把23456……都+1,即[[TargetItem.OrderNum+1]]。

也就是Axure会把每一项根据条件来判断,符合条件,就执行下方结果,不符合的就不动。

第二步添加行

新增的一行顺序号为2,即当前行的顺序号+1,也就是[[Item.OrderNum+1]]。

第三步添加排序

“在下方插入”效果就大功告成。

剩下的三个效果在上方插入行、上移和下移,大体类似,这里就不赘述了,在附件中附上源文件供大家参考。大家可以看看能不能按照以上思路把剩下的这三个效果实现。

五、最后

在效果实现的过程中难免会有一些问题,例如点击没效果,没有按照预期的效果发展等,对此在不断的调试和修改过程中,我总结了两点:

实现过程中,变化数据可直接观测。如例子中的OrderNum,虽然在最后界面呈现上不会出现,但是在绘制过程中,我们可以把它显示在界面上,实时观察做的对不对,最后再把它去掉即可。

一步一步来,不要一蹴而就。

如例子中要把23456…都+1,要先写出[[TargetItem.OrderNum>Item.OrderNum]]的条件,再写出[[TargetItem.OrderNum+1]]的结果,这个过程我们就可以把结果简单用某个数字代替,以此来先看看条件写得对不对。

基本效果出来后,可以再进行样式等方面的优化,比如该例子我还画了个“豪华”版在附件中。

参考文章:https://www.axure.com.cn/76497/

 

本文由 @阿喊设计 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!