Axure设计:中继器版的自制“下拉框”控件

2025-10-27 16:27:20

1、因部分设计原理、布局和早期的自制“下拉框”控件类似,这里不再累述,具体可参考以下链接~

2、“下拉框”布局如下:

“文本框:option”设置内容为“请输入…”

“热区:zone”至于顶层

Axure设计:中继器版的自制“下拉框”控件

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

Axure设计:中继器版的自制“下拉框”控件

4、设置”中继器“,命名:option

设置“矩形”,尺寸212*170,命名:block,可以设置一个阴影效果

(“矩形:block”的初始尺寸不是很重要,后期需要根据“中继器”的尺寸而改变)

5、进入“中继器:option”,新建一个“文本标签”;

设置“文本标签”,尺寸200*40,命名:text;

Axure设计:中继器版的自制“下拉框”控件

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

Axure设计:中继器版的自制“下拉框”控件

7、设置“中继器:option”的“每项加载时”的交互动作:

---

设置“文本标签:text”的值为:[[Item.content]]

----

Axure设计:中继器版的自制“下拉框”控件

Axure设计:中继器版的自制“下拉框”控件

8、设置“矩形:block”的”载入时“的交互动作:

---

设置“矩形:block”的尺寸:宽为212,高为[[LVAR1.itemCount*40+10]]

---

Axure设计:中继器版的自制“下拉框”控件

Axure设计:中继器版的自制“下拉框”控件

9、设置“元件:option”为局部变量LVAR1

所以“矩形:block”的”高“的值为[[LVAR1.itemCount*40+10]]

Axure设计:中继器版的自制“下拉框”控件

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

Axure设计:中继器版的自制“下拉框”控件

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

Axure设计:中继器版的自制“下拉框”控件

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

Axure设计:中继器版的自制“下拉框”控件

13、动作1:

---

显示“组合:option_all”,动画:逐渐,时间:300毫秒,置于顶层,”弹出效果“

---

如下图所示:

Axure设计:中继器版的自制“下拉框”控件

14、动作2:

---

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

---

Axure设计:中继器版的自制“下拉框”控件

15、设置“元件:option_all”为局部变量LVAR1

所以,X的值[[LVAR1.x]]

Axure设计:中继器版的自制“下拉框”控件

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

Axure设计:中继器版的自制“下拉框”控件

17、最后设置“点击选项”时的交互动作~

即”文本标签:text“的”鼠标点击时“的交互动作:

Axure设计:中继器版的自制“下拉框”控件

18、动作1:

---

设置”文本框:option“的值为:[[this.text]]

---

Axure设计:中继器版的自制“下拉框”控件

19、动作2:

---

隐藏“组合:option_all”,动画:逐渐,时间:200毫秒

---

Axure设计:中继器版的自制“下拉框”控件

20、动作3:

---

移动“组合:option_all”,动画:线性,时间:200毫秒

移动经过的X为0,经过的Y为-15

---

Axure设计:中继器版的自制“下拉框”控件

21、至此,基本设置就结束了~

以后”下拉框“需要设置新的选项,只要更新”中继器:option“的内容即可~

是不是很简单~

Axure设计:中继器版的自制“下拉框”控件

Axure设计:中继器版的自制“下拉框”控件

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

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢