【axure教程】repeater中继器实现课程表的上移下移效果

实例描述：通过 repeater 中继器实现点击上移、下移按钮，移动相应的课程顺序。

这里我用的是 AXURE 汉化版的软件，相关下载请去官网，官网附有汉化教程方法，自行查看。

准备工作

上移、下移图标：

repeater 中继器：

首先用表格做一个表头：

双击 repeater 中继器进入设置，这里我给中继器命名为 mytab，通过（粘贴复制的方法）另添加两列，并将上下移动图标按钮放到最后一列中，这里我为三列分别命名为 tab1、tab2、tab3。

为 mytab 设置数据集，如图：

初始化中继器，双击进入“每页加载项”，设置相关元件属性，选中“设置文本”点击你需要设置的原件 tab1，设置文本为“值”，变量为“[[Item.id]]”，同样的 tab2 设置文本也为“值”，变量为“[[Item.content]]”，如下图：

最终显示:

因为排序过程中编号会相应变化，所以将一列表格挡在题型编号处：

上移、下移按钮图标添加事件：

实现上移下移思路：

• 通过修改 id 值，然后进行排序，从而达到想要的效果。
• 只要把当前选中行的 id 值与上一行或者下一行互换，再进行排序就可以。以下移为例（实现上移同理）。
• 借助一个全局变量 tempData 来保存当前选中行的 id 值
• 更新上一行的 id 数值，使其加 1
• 更新当前行的 id 数值，使其减 1
• 添加排序，重新按照升序排列

如下图：

实现步骤：

1、添加全局变量 tempRows,tempRowsUp

2、选中上移图标，进入 case，设置全局变量，选中要设置的全局变量 tempRows,设置值为“[[Item.id]]”，如图：

3、更新行，选中刚刚自己创建的中继器 mytab，设置条件为[[Item.id == tempRows+1]]，设置列 id 值为[[Item.id-1]]，如图：

4、更新行，选中中继器 mytab，设置 this 的 id 为[[Item.id +1]]，如图：

5、添加排序

到此下移效果实现完成，实现上移同理。

最后，为大家留一个想一想问题，就是在排序过程中编号会发生相应变化，如何解决这一问题呢，欢迎大家留言谈论。

以上关于【axure教程】repeater中继器实现课程表的上移下移效果的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。