今天要做的是设计一个移动端的选择器功能,由于产品的独特性(量大),所以在寻找指定产品时移动加载用户体验较差,很难找到自己想要的产品,所以我们计划设计一个下拉选择器来提高用户的体验,这是一个用来选择产品的下拉功能,如图。
现在我们开始用Axure制作我们的移动选择器了,先做个简单的模型,鼠标拖动即可移动实现数据的移动,如下图所示,在数字处拖动即可实现数字移动:
既然是动态显示,这里我们必然要用到动态面板了,新建一个动态面板,用来显示我们的固定显示区域(这时我们能看到的区域)。
进入到动态面板中,我们将动态面板划分成三个区域,上下区域为过渡区域(设置透明度,区分数据),中间为显示区域。接着我们再创建2个动态面板,一个是用来拖动的,另一个是用来存放数据的,下面是模板结构。
这里主要的事件操作都在show这个动态面板中完成,拖动show面板时要显示数据,所以data面板要跟随show移动,所以show这里我们要设置一个跟随事件。
接着我们来处理拖动事件,首先我们要做的是将移动的动作选定,这里我们拖动时是垂直拖动,所以我们给show添加一个移动时间,移动方式为垂直移动。
我们需要对移动进行以下几两种情况进行判断,当show的顶部位置大于顶部遮挡的高度时,说明数据还在下面这时就可以每次移动顶部遮挡的高度(这里最好将分割的三处和数据显示栏的高度设置一致,这样移动时就可以避免跑偏)。
当show的底部位置大于mokuai和底部遮挡的位置时,移动显示区域的高度,这样每次都以指定的高度进行移动,当你移动位置不够时会退回原来的位置,移动过多时会回到准确的位置上,这时你会发现移动的位置基本都是一致的。
到了这里,功能基本实现了,但是还有个问题,那就是show和data的高度不一样,当我们拖动到点击show底部时,data多出来的位置无法进行拖动,所以这里我们需要再添加一个载入事件,在载入时将show的宽高设置成data的宽高。
“fx”进入编辑文本窗口,而后点击“Insert Variable or Function”按钮,里面有很多函数可以使用,下面是一些常用的函数:
函数名称 | 函数说明 |
x | 获得部件的X坐标 |
y | 获得部件的X坐标 |
This | 获得当前部件 |
width | 获得部件的宽度 |
height | 获得部件的高度 |
scrollX | 动态面板部件在X轴滚动的距离,单位:px |
scrollY | 动态面板部件在Y轴滚动的距离,单位:px |
text | 部件的文本值 |
name | 部件的名称 |
top | 获得部件的Y坐标,即顶部Y坐标的值 |
left | 获得部件的X坐标,即左侧X坐标的值 |
right | 获得部件右侧的X坐标,right-left=部件的宽度 |
bottom | 获得部件底部的Y坐标,bottom-top=部件的高度 |
Repeater | 获得当前项的父中继器 |
visibleItemCount | 返回当前页面中所有可见项的数量 |
itemCount | 当前过滤器中项的数量 |
dataCount | 当前过滤器中所有项的个数 |
pageCount | 中继器对象中页的数量 |
pageindex | 中继器对象当前的页数 |
Window.width | 窗口的宽度 |
Window.height | 窗口的高度 |
Window.scrollX | 窗口在X轴滚动的距离 |
Window.scrollY | 窗口在Y轴滚动的距离 |
Cursor.x | 鼠标指针所在的x坐标 |
Cursor.y | 鼠标指针所在的y坐标 |
DragX | 本次拖动事件部件延x轴拖动的距离 |
DragY | 本次拖动事件部件延y轴拖动的距离 |
TotalDragX | 部件延x轴拖动的总距离(在一次OnDragStart和OnDragDrop函数之间) |
TotalDragY | 部件延y轴拖动的总距离(在一次OnDragStart和OnDragDrop函数之间) |
DragTime | 部件拖动的总时间 |
+ | 加,返回前后两个数的和 |
- | 减,返回前后两个数的差 |
* | 乘,返回前后两个数的乘积 |
/ | 除,返回前后两个数的商 |
% | 余,返回前后两个数的余数 |
abs(x) | 返回x的绝对值 |
acos(x) | 返回x的反余弦值 |
asin(x) | 返回x的反正弦值 |
atan(x) | 返回x的反正切值 |
atan2(y,x) | 返回从x轴到(x,y)的角度 |
ceil(x) | 对x进行上舍入操作 |
cos(x) | 返回x的余弦值 |
exp(x) | 返回x的e指数值 |
floor(x) | 对x进行下舍入操作 |
log(x) | 返回x的自然对数 |
max(x,y) | 返回x和y两个数的最大值 |
min(x,y) | 返回x和y两个数的最小值 |
pow(x,y) | 返回x的y次幂 |
random() | 返回0到1的随机数 |
sin(x) | 返回x的正弦值 |
sqrt(x) | 返回x的平方根 |
tan(x) | 返回x的正切值 |
Now | 返回计算机系统当前设定的日期和时间值 |
GenDate | 获得生成Axure原型的日期和时间值 |
getDate() | 返回Date对象属于哪一天的值,可取值1-31 |
getDay() | 返回Date对象为一周中的哪一天,可取值0~6,周日的值为0 |
getDayOfWeek() | 返回Date对象为一周中的哪一天,表示为该天的英文表示,如周六表示为“Saturday” |
getFullYear() | 获得日期对象的4位年份值,如2015 |
getHours() | 获得日期对象的小时值,可取值0~23 |
getMilliseconds() | 获得日期对象的毫秒值 |
getMinutes() | 获得日期对象的分钟值,可取值0~59 |
getMonth() | 获得日期对象的月份值 |
getMonthName() | 获得日期对象的月份的名称,根据当前系统时间关联区域的不同,会显示不同的名称 |
getSeconds() | 获得日期对象的秒值,可取值0~59 |
getTime() | 获得1970年1月1日迄今为止的毫秒数 |
getTimezoneOffset() | 返回本地时间与格林威治标准时间(GMT)的分钟值 |
getUTCDate() | 根据世界标准时间,返回Date对象属于哪一天的值,可取值1-31 |
getUTCDay() | 根据世界标准时间,返回Date对象为一周中的哪一天,可取值0~6,周日的值为0 |
getUTCFullYear() | 根据世界标准时间,获得日期对象的4位年份值,如2015 |
getUTCHours() | 根据世界标准时间,获得日期对象的小时值,可取值0~23 |
getUTCMilliseconds() | 根据世界标准时间,获得日期对象的毫秒值 |
getUTCMinutes() | 根据世界标准时间,获得日期对象的分钟值,可取值0~59 |
getUTCMonth() | 根据世界标准时间,获得日期对象的月份值 |
getUTCSeconds() | 根据世界标准时间,获得日期对象的秒值,可取值0~59 |
parse(datestring) | 格式化日期,返回日期字符串相对1970年1月1日的毫秒数 |
toDateString() | 将Date对象转换为字符串 |
toISOString() | 返回ISO格式的日期 |
toJSON() | 将日期对象进行JSON(JavaScript Object Notation)序列化 |
toLocaleDateString() | 根据本地日期格式,将Date对象转换为日期字符串 |
toLocaleTimeString() | 根据本地时间格式,将Date对象转换为时间字符串 |
toLocaleString() | 根据本地日期时间格式,将Date对象转换为日期时间字符串 |
toTimeString() | 将日期对象的时间部分转换为字符串 |
toUTCString() | 根据世界标准时间,将Date对象转换为字符串 |
UTC(year,month,day,hour, minutes sec, millisec) | 生成指定年、月、日、小时、分钟、秒和毫秒的世界标准时间对象,返回该时间相对1970年1月1日的毫秒数 |
valueOf() | 返回Date对象的原始值 |
addYears(years) | 将某个Date对象加上若干年份值,生成一个新的Date对象 |
addMonths(months) | 将某个Date对象加上若干月值,生成一个新的Date对象 |
addDays(days) | 将某个Date对象加上若干天数,生成一个新的Date对象 |
addHous(hours) | 将某个Date对象加上若干小时数,生成一个新的Date对象 |
addMinutes(minutes) | 将某个Date对象加上若干分钟数,生成一个新的Date对象 |
addSeconds(seconds) | 将某个Date对象加上若干秒数,生成一个新的Date对象 |
addMilliseconds(ms) | 将某个Date对象加上若干毫秒数,生成一个新的Date对象 |
== | 等于 |
!= | 不等于 |
< | 小于 |
<= | 小于等于 |
> | 大于 |
>= | 大于等于 |
&& | 并且 |
|| | 或者 |