码云笔记前端博客
Home > 产品教程 > 【axure教程】repeater中继器实现课程表的上移下移效果

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

2018-06-25 分类:产品教程 作者:码云 阅读(9315)

本文共计845个字,预计阅读时长需要3分钟。

实例描述:通过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中继器实现课程表的上移下移效果

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

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

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(2) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
2

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 【axure教程】repeater中继器实现课程表的上移下移效果

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 458 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 14 个
  • 标签总数: 1011 个
  • 建站时间: 495 天
  • 访问总量: 8648026 次
  • 最近更新: 2019年10月21日