Axure实战004:APP选择器设计

      今天要做的是设计一个移动端的选择器功能，由于产品的独特性（量大），所以在寻找指定产品时移动加载用户体验较差，很难找到自己想要的产品，所以我们计划设计一个下拉选择器来提高用户的体验，这是一个用来选择产品的下拉功能，如图。

现在我们开始用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对象
==	等于
!=	不等于
<	小于
<=	小于等于
>	大于
>=	大于等于
&&	并且
||	或者