最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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

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

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

准备工作

上移、下移图标:

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

repeater中继器:

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

首先用表格做一个表头:

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

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

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

为mytab设置数据集,如图:

为mytab设置数据集,如图: 为mytab设置数据集,如图:

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

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

最终显示:

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

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

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

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

实现上移下移思路:

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

如下图:

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

实现步骤:

1、添加全局变量tempRows,tempRowsUp

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

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

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

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

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

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

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

5、添加排序

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

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

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 【axure教程】repeater中继器实现课程表的上移下移效果

发表评论