今天要做的是设计一个移动端的选择器功能,由于产品的独特性(量大),所以在寻找指定产品时移动加载用户体验较差,很难找到自己想要的产品,所以我们计划设计一个下拉选择器来提高用户的体验,这是一个用来选择产品的下拉功能,如图。
现在我们开始用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对象 |
== |
等于 |
!= |
不等于 |
< |
小于 |
<= |
小于等于 |
> |
大于 |
>= |
大于等于 |
&& |
并且 |
|| |
或者 |