Axure设计:中继器版的自制“下拉框”控件
1、因部分设计原理、布局和早期的自制“下拉框”控件类似,这里不再累述,具体可参考以下链接~
2、“下拉框”布局如下:
“文本框:option”设置内容为“请输入…”
“热区:zone”至于顶层

3、新建一个“中继器”和“矩形“

4、设置”中继器“,命名:option
设置“矩形”,尺寸212*170,命名:block,可以设置一个阴影效果
(“矩形:block”的初始尺寸不是很重要,后期需要根据“中继器”的尺寸而改变)
5、进入“中继器:option”,新建一个“文本标签”;
设置“文本标签”,尺寸200*40,命名:text;

6、“中继器:option”设置一列为“content”,输入两行内容,分别为“选项一”和“选项二”

7、设置“中继器:option”的“每项加载时”的交互动作:
---
设置“文本标签:text”的值为:[[Item.content]]
----


8、设置“矩形:block”的”载入时“的交互动作:
---
设置“矩形:block”的尺寸:宽为212,高为[[LVAR1.itemCount*40+10]]
---


9、设置“元件:option”为局部变量LVAR1
所以“矩形:block”的”高“的值为[[LVAR1.itemCount*40+10]]

10、把“矩形:block”和“中继器:option”按下图方式组合,并命名为”option_all“

11、按下图组合”下拉框“控件,并设置”组合:option_all“为”隐藏“状态

12、设置”热区:zone“的”鼠标单击时“的交互动作:

13、动作1:
---
显示“组合:option_all”,动画:逐渐,时间:300毫秒,置于顶层,”弹出效果“
---
如下图所示:

14、动作2:
---
移动“组合:option_all”到指定位置,动画:线性,时间:300毫秒
---

15、设置“元件:option_all”为局部变量LVAR1
所以,X的值[[LVAR1.x]]

16、Y的值为:[[this.y+this.height]]

17、最后设置“点击选项”时的交互动作~
即”文本标签:text“的”鼠标点击时“的交互动作:

18、动作1:
---
设置”文本框:option“的值为:[[this.text]]
---

19、动作2:
---
隐藏“组合:option_all”,动画:逐渐,时间:200毫秒
---

20、动作3:
---
移动“组合:option_all”,动画:线性,时间:200毫秒
移动经过的X为0,经过的Y为-15
---

21、至此,基本设置就结束了~
以后”下拉框“需要设置新的选项,只要更新”中继器:option“的内容即可~
是不是很简单~


22、觉得不错的话,请投个票,加个赞哦~