Axure教程:如何利用中继器调整项目顺序?

AI时代,如何更快入行抢占红利得高薪?前阿里巴巴产品专家带你15天入门AI产品经理。了解一下>

中继器项目的顺序调整应该怎么操作呢?本文给你分享经验!

这次的学习中,我是用QQ的界面管理器(QQ最小化左边的按钮中)作为案例进行教学的,首先我们现需要先明确下交互的内容:

然后呢,需要画元件:

注意命名,防你不知道我在说什么。

  • sort:排序用的字段
  • selected:复选框的选中状态
  • icon:每项前面的icon
  • name:每项的名字

中继器右侧的样式中有背景交替选项,勾选后选2种颜色即可。

中继器中的行,是由复选框btn_select、放文本用的矩形text,和无填充色的矩形transfer组成。

transfer不可以填色,不然中继器交替背景颜色会被盖住。给transfer增加交互样式,选中时填充色变为淡紫色。

最后将整体选中,右键组合,命名为row。

最后还要增加1个全局变量“sort”来标记当前选中的项目是第几项。

每项载入时

在每项载入时,我们需要做4个事情:

  1. 赋值文本。
  2. 根据sort选中当前项的transfer改变背景色。
  3. 根据selected数据选中/取消选中复选框。
  4. 根据sort启用/禁用对应按钮。

讲道理,按照人脑逻辑,背景色和上下移按钮的交互分别是在点击选中和点上下移按钮时候发生的事情,不应该做在这里的,但是为什么我做在这里了呢?

因为在其他位置对变量改变后会更新每项重新载入,放在这里的话,更新行的时候顺便就把背景色和上下移按钮的状态都更新了。

改变文本时要选用富文本,为icon和文本设置不同格式。

icon的字体要选专用的字体,例如我的icon字体是iconfont,不然在axure里看不到,后面的文本选普通字体即可。给二者设置放在一起协调的字号,富文本里看可能会很不协调,但在中继器里看是不一样的,以中继器中显示的预览样式为准。

[[Item.Repeater.itemCount]]代表中继器中项目的数量。

其他的没什么难点,就不需要详细解释了。注意:哪里应该是if哪里应该是else if,要看清楚。

row

下面让我们钻到中继器里面,看row的交互:

点击时,要设置sort为index,中继器中的index是数据行的索引编号。这个编号永远不会变,第1个就是1,第2个就是2,不随数据内容变化而变化。

改变变量之后再更新一下行,不修改任何内容,单纯的更新下,就会重新载入每项了,这时点击改变背景色的效果就出来了。

btn_select

虽然将选中框也组合在row里面了,但是点选中框的时候并不会触发row的交互。

在鼠标单击时,把sort=index的交互再做一次。

在选中时,需要更新当前行,将selected数据改为1,取消选中时嘿将selected数据改为0。这样在更新数据后,选中框的√才会保存下来,不然就会初始化为默认的状态。

上下移按钮

下面就是最关键的移动按钮交互了,先让我们看上移按钮。

点击后我们需要让当前行的sort-1,上一行的sort+1,改完之后再改变sort告知最新的当前sort是几,再更新行重新载入每项。

但这样有些麻烦,所以让我们换个思路,先改变sort!

首先让sort-1,就是将sort变为我们当前点击的这行数据的上一项的代号。

更新→鼠标点击的行的上一行条件[[TargetItem.index==sort]]

更新sort=[[sort+1]]

更新→鼠标点击的行

条件[[TargetItem.index==sort+1]]

更新sort=[[sort]]

我知道这很难理解,给你们讲这个我也很痛苦的!所以我画了一个数据变化的图,仔细看,你一定能懂!

最后,按照sort进行升序排序,就成功把这这2项的顺序交换过来啦。下移呢,也是同样的思维方法。

这次课程的理解成本占比非常高,一定要静下心来,聪明的你一定可以学会!

 

作者:Synmo梦儿,公众号:梦话Axure

本文由 @Synmo梦儿  原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Pexels ,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
4人打赏
评论
欢迎留言讨论~!
  1. 楼主,你好!学习了你的帖子,有不少收货,非常感谢!在学习的过程中,我发现上移和下移不能进行连续的操作,当我将选中项移动之后,第1,row的交互还是停留在之前选择的那行;第2,继续点击上移,又恢复的之前的排序。

    在上移和下移交互中,少了sort变量的更改,如果加上的话,上下移动就可以连续,并且row的选中颜色跟随项目移动而发生变动

    回复
  2. 楼主中继器中的icon列中放的是图片还是什么 :roll: 我搞不出来那个icon

    回复
    1. iconfont了解一下,不了解的话关注我公众号了解下,里面有详细的教程~

      回复
  3. 能用到中继器的,除了你们无聊的教学,现实工作中谁闲的蛋疼用这些玩意,都是能静态静态,能简化简化的

    回复
    1. 学习技术和逻辑,无关工作。

      回复
    2. 其实培养好的技术逻辑思维,也是工作的一种进阶,赞楼主!

      回复
  4. 讲述“每项载入时”时的“上下移按钮”流程图有误,启用禁用都写btn_down。

    回复
    1. 复制粘贴的时候忘记改了,感谢指出。

      回复