童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

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

11月3日 眉梢欢投稿
  中继器项目的顺序调整应该怎么操作呢?本文给你分享经验!
  这次的学习中,我是用QQ的界面管理器(QQ最小化左边的按钮中)作为案例进行教学的,首先我们现需要先明确下交互的内容:
  然后呢,需要画元件:
  注意命名,防你不知道我在说什么。
  sort:排序用的字段
  selected:复选框的选中状态
  icon:每项前面的icon
  name:每项的名字
  中继器右侧的样式中有背景交替选项,勾选后选2种颜色即可。
  中继器中的行,是由复选框btnselect、放文本用的矩形text,和无填充色的矩形transfer组成。
  transfer不可以填色,不然中继器交替背景颜色会被盖住。给transfer增加交互样式,选中时填充色变为淡紫色。
  最后将整体选中,右键组合,命名为row。
  最后还要增加1个全局变量“sort”来标记当前选中的项目是第几项。
  每项载入时
  在每项载入时,我们需要做4个事情:
  赋值文本。
  根据sort选中当前项的transfer改变背景色。
  根据selected数据选中取消选中复选框。
  根据sort启用禁用对应按钮。
  讲道理,按照人脑逻辑,背景色和上下移按钮的交互分别是在点击选中和点上下移按钮时候发生的事情,不应该做在这里的,但是为什么我做在这里了呢?
  因为在其他位置对变量改变后会更新每项重新载入,放在这里的话,更新行的时候顺便就把背景色和上下移按钮的状态都更新了。
  改变文本时要选用富文本,为icon和文本设置不同格式。
  icon的字体要选专用的字体,例如我的icon字体是iconfont,不然在axure里看不到,后面的文本选普通字体即可。给二者设置放在一起协调的字号,富文本里看可能会很不协调,但在中继器里看是不一样的,以中继器中显示的预览样式为准。
  〔〔Item。Repeater。itemCount〕〕代表中继器中项目的数量。
  其他的没什么难点,就不需要详细解释了。注意:哪里应该是if哪里应该是elseif,要看清楚。
  row
  下面让我们钻到中继器里面,看row的交互:
  点击时,要设置sort为index,中继器中的index是数据行的索引编号。这个编号永远不会变,第1个就是1,第2个就是2,不随数据内容变化而变化。
  改变变量之后再更新一下行,不修改任何内容,单纯的更新下,就会重新载入每项了,这时点击改变背景色的效果就出来了。
  btnselect
  虽然将选中框也组合在row里面了,但是点选中框的时候并不会触发row的交互。
  在鼠标单击时,把sortindex的交互再做一次。
  在选中时,需要更新当前行,将selected数据改为1,取消选中时嘿将selected数据改为0。这样在更新数据后,选中框的才会保存下来,不然就会初始化为默认的状态。
  上下移按钮
  下面就是最关键的移动按钮交互了,先让我们看上移按钮。
  点击后我们需要让当前行的sort1,上一行的sort1,改完之后再改变sort告知最新的当前sort是几,再更新行重新载入每项。
  但这样有些麻烦,所以让我们换个思路,先改变sort!
  首先让sort1,就是将sort变为我们当前点击的这行数据的上一项的代号。
  更新鼠标点击的行的上一行条件〔〔TargetItem。indexsort〕〕
  更新sort〔〔sort1〕〕
  更新鼠标点击的行
  条件〔〔TargetItem。indexsort1〕〕
  更新sort〔〔sort〕〕
  我知道这很难理解,给你们讲这个我也很痛苦的!所以我画了一个数据变化的图,仔细看,你一定能懂!
  最后,按照sort进行升序排序,就成功把这这2项的顺序交换过来啦。下移呢,也是同样的思维方法。
  这次课程的理解成本占比非常高,一定要静下心来,聪明的你一定可以学会!
投诉 评论 转载

Axure教程:随着鼠标移动,图片放大效果实现移动鼠标放大缩小图片在原型设计的时候算是很常用的功能,如何在Axure中实现呢?这篇文章给你解答。关键步骤1:底层是图片,第二层是小矩形;小矩形随着鼠标进行移动,图……Axure教程:在动态面板里面切换标签的效果这次我们来讲解一个在动态面板里面切换标签的效果。一、准备元件1。首先打开一下Axure新建文件,拖取一个矩形,设置长度:375px,高度:502。然后输……有趣的Axure案例:钓鱼游戏的设计学习Axure的时候觉得中继器与函数很枯燥?本文教你一个赶走枯燥的方法设计游戏!让你感觉学习Axure原来可以这么有趣!Axure是产品经理工作中最重要的软件之一,除此之……Axure模拟(二):如何进行微信聊天置顶、取消置顶与删除操这篇文章将继续上一篇的话题,讲讲如何用Axure实现微信对话的置顶、取消置顶和删除的操作。同时扯几句题外话,简单谈谈Axure的学习方法及学习过程中的注意事项。上一篇文章……Axure模拟(一):如何进行微信聊天列表已读、未读的标记?本文和大家交流一下微信聊天页面中的已读、未读标记的原型效果的实现方法。微信是很多人模拟的第一个产品原型。虽然微信以极简著称,但在制作原型的过程中才发现其功能的实现并不像想……Axure教程:如何在中继器中,动态实现表单增删改?本文作者分享了自己在中继器中动态实现表单增删改的方法,一起来看看吧Repeater控件的使用步骤为:需求:在Axure中动态的实现表单的增删改。一、定义元素:……Axure教程:如何利用中继器调整项目顺序?中继器项目的顺序调整应该怎么操作呢?本文给你分享经验!这次的学习中,我是用QQ的界面管理器(QQ最小化左边的按钮中)作为案例进行教学的,首先我们现需要先明确下交互的内容:……Axure示例:需求文档阿里钉钉的消息模块笔者为产品新人,这篇文章是笔者在看了产品相关视频后的实战联系,通过这篇文章,向大家分享我的学习成果,希望可以获得宝贵意见,一起来共同学习。为什么选择钉钉的消息模块?……做出规范的原型,这3步不可少(附KEEP源文件下载)本文分享来自Axure实战班第6期同学Coreleone:原型设计是交互设计师与PD、PM、开发工程师沟通的最好工具。本人将结合最近制作好的keep原型,与大家分享一……如何像专家一样针对原型进行可用性测试?可用性测试不是针对设计的某个单一阶段而言的,你必须将其放到整个产品过程中,在这个过程中不断迭代和完善。如果你想要最好的产品,你必须从原型阶段就已经开始预测真实的用户场景。可用性……Axure教程:同一锚点等比例缩放并同时改变内容的效果本文主要分享一种不需要设置变量做出的实用动态交互效果。enjoy相比于用各种变量来做复杂的动态交互,我在这里分享一种不需要设置变量做出的实用动态交互效果。首先,我们……实战经验如何用Axure做出高保真的个人网站大家好!我是一名UX设计师,希望可以与共同喜欢探索用户体验的朋友们一起成长!我会不定期地更新一些有关用户体验方面的文章。本文主要分享:无需ui和前端制作个人网站,只需一个Axu……
设计师怎样高效拆分业务?试试三维一体模型设计沉思录改善产品的利器之用户体验地图设计师不该忽略的思维定势在消费升级的趋势下,如何让设计赋能体验升级经验分享设计师如何做项目总结?积分转盘抽奖算法设计解析如何在不同场景下正确选择加载样式?以诸葛io手机端为例:数据分析产品的设计如何优化?产品要如何专注于做他们擅长的事情,走向成功?商品搜索人气推荐算法的缺陷及可能的改进方向为客服自动分配客户的总结从0到1,ERP体系的高阶模型
麻阳税务文明实践与你万步有约品牌优化企业品牌优化是否需要做成都太子岭滑雪场怎么样如何做好企业合并重组后企业文化的融合六年级优秀作文800字难忘的第一次随身携带造句用随身携带造句大全绿意的生活惠州旅游景点华米做不好自己生姜红茶能每天喝吗月经期适合喝生姜红茶吗将进酒自信的我作文600字热议聚热点网

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界