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、觉得不错的话，请投个票，加个赞哦~