《Axure手机版地区选择器设计》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,原型,交互设计等多维度案例或实操来进行更多的学习;此教程是由蜡笔xiaoxin在2021-11-24发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
下面就由北极熊素材库的小编给大家详细的介绍一下Axure手机版地区选择器设计,一起来看一看吧。
该原型内已包含全国一二级省市数据,可以直接使用。如果需要修改成其他(例如时间选择器),修改页非常方便,因为该原型用中继器做的,所以修改的时候只需要简单填写表格内容即可,也可以当做学习中继器交互的案例。
接下来作者也会尝试做视频教程,如有喜欢该原型或者有什么疑问,希望您能收藏和评论回个6,作者完成视频教程之后,会马上更新。
演示地址:https://jiuere.axshare.com/#g=1&p=%E4%BA%8C%E7%BA%A7%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9%E5%99%A8_1_
1. 拖动选择
2. 快捷选择
1. 快捷选择中继器
这个中继器非常简单
每项加载时,设置中继器内文本框文字=item.column0,鼠标单击文本框时,设置位置文本框文字=column1+column2。
2. 全部地区选择中继器
这里其实是两个中继器,先说左边的中继器。
每项加载时,每项加载时,设置中继器内文本框文字=item.column0,如果xuanzhong=1,选中该行,默认第一行选中。然后将中继器转为动态面板(内面板),之后再转一次动态面板(外面板)。
外面板取消自动调整内容尺寸,自己调节大小;外面板拖动时,垂直拖动内面板;外面板拖动结束时,移动内面板到绝对位置=内面板的y值/中继器每行高度,然后用fixed函数取整数,再乘中继器每行高度。这样做的目的就可以保证拖动选择不会卡在两个选项中间。
拖动结束时,更新行,先把所有行的选中设为0,即未选中,然后通过计算移动了多少格,选中item.index==移动的格数:(内面板的y值-初始y值)/每行的高度,然后fixed四舍五入后用abs函数去绝对值,再+1。
这样左边中继器就完成了。
然后制作右边中继器,将左边中继器复制过去,插入多一列,把导入后:
每项加载时,设置文本框文字=column1,其他不变。
然后左边中继器行被选中时,筛选右边中继器,条件为column0=column1,筛选完成后更新第一行的选中=1。
最后是确定和取消按钮的事件。
鼠标单击确定按钮时,设置城市文本=左边中继器选中的column0+右边中继器选中的column1,然后隐藏该弹窗,鼠标单击取消按钮时,隐藏该弹窗。
以上就是Axure手机版地区选择器设计的全部内容介绍了,关于更多axure地区选择器操作的教程信息,可参阅Axure原型设计:地区选择联动,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 axure中继器使用教程之制作直播视频的卡片列表操作实例
> 下一篇 Axure中继器做手机版日期选择器和手机日历
2022-01-27 16:13
2022-01-25 09:57
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论