newheader
手机登录
账密登录
登录
还没有账号? 马上注册
手机登录
账密登录
验证码图片
忘记密码?
登录
还没有账号? 马上注册
欢迎注册陪学网账号
已经有账号? 马上登录
利用中继器制作上移下移
陪学
2018-06-27 15:55:06
784
0
上移下移是我们在制作原型的时候经常会用到的功能,远的不说,就看我们axure里面就有好多地方用到了上移下移。例如,页面窗口中对不同的页面进行移动,动态面板的状态管理窗口中对动态面板的状态进行移动。

上移下移是我们在制作原型的时候经常会用到的功能,远的不说,就看我们axure里面就有好多地方用到了上移下移。例如,页面窗口中对不同的页面进行移动,动态面板的状态管理窗口中对动态面板的状态进行移动。这里我们就用大家熟悉的动态面板的状态管理窗口作为案例给大家看看吧。

 

先看一下效果是怎么样的。

 

 

那要怎么做才好呢?我们可以利用中继器,来完成它。

 

首先,我们把需要的元素画出来。主要是要来做状态的移动,所以其他部分我这里就用截图代替了。这里主要自己做的就是:上下移动的箭头、用中继器做的状态页。

 

中继器里边的数据有两行,一行是中继器的内容:状态1、状态2等,一行是用来记录当前这一行的序号的,这一行不需要在中继器中有所显示。在中继器的编辑页面中,设置矩形部件的选中样式,这样能看到选中的是哪一项,这里我们设置的浅蓝色。

 

   

同时设置了上移、下移箭头的禁用样式,并且默认禁用。因为我们在不选中状态的时候,都不能使用上移、下移按钮,这个大家应该都明白。

 

准备好部件之后,我们开始来制作了。首先看看,需要怎么样去做呢?借助一个全局变量No来记录当前选中的项(无法使用.这个符号,所以在建立数据列和变量的时候将“.”去掉了,No.变成了No,好气啊)。

 

以第二项为例,内容是状态2,序号是2。需要将它调整到第一项。这时候,序号就起到作用了。点击第二项,数据:状态22不变,变量No现在是2。在点击上移之后,数据状态2不变,但是序号需要将它更改为变量No-1(当前会变成1),再将这个序号告知数据No列,让它更新一下。最后,按照更新后的No列进行排序就可以了。

 

 

 

在更新行时设置条件时,用到index。中继器中的index是数据行的索引编号,这个编号是永远不会改变,这个要注意。状态2原来index2,移动之后index变成了1Index可以帮助我们确定更新的就是当前的行,而不受数据或者变量的影响。

 

 

 

知道了上移怎么做,下移就很明确了,一样的方法去分析,去设置就可以了。

 

把这个最难的做出来之后,相信上移、下移箭头的启用禁用,当前项的选中(用index去判断当前项)这些设置就难不倒大家了。这个设置有一点要注意的是,设置在中继器的每项加载时,为什么呢?注意,我们在点击上移和下移的时候设置了更新行,重新加载了项。在这里设置的话,重新加载的时候就把样式和按钮的状态都更新了。

 

 

 

到这里,我们这个上移下移的案例就做好了。做法虽然不难,但是交互的思路可能需要花点时间去想一想的。了解了思路之后,我们可以用这种方法举一反三,做出更多更复杂的原型。这里还是要说一句,如果有其他的设置思路,欢迎来跟我们一起交流哦!

 

更多学习资料、重磅报告、面试问题、招聘信息、免费课程,可联系班主任(pexuepexue)

 


 

长按二维码或加微信pexuepexue
进陪学产品交流群回复:资料分享
免费获取资料:每日更新 免费课程、学习资料、报告、招聘面试
标签:
登录 后参与讨论
发表
全部评论
没有更多评论了
newfooter
陪学网专注于产品管理类课程的开发与制作,
志在为产品经理、交互设计、平面设计、需求人员分享最新、最好的产品类课程。
陪学网:陪伴学习、陪伴成长
粤ICP备18075915号