七步实现中继器方式制作下拉框

话不多说,先看效果



为什么用中继器的方式实现下拉框

原因1:自带的下拉框太丑


嗯嗯,的确很丑,朴素的外表也没办法和华丽的原型界面相匹配

原因2:动态面板太死

动态面板的方式可以制定样式,交互等等,但是不够灵活,每次新增一个选项时,都需要重新添加交互

嗯嗯,不太方便

中继器:重复样式的神器,避免重复劳作,偷懒好帮手

直奔主题:如何使用中继器制作下拉框

第一步:拖出一个按钮框,设计好交互动作,悬停、选中、按下、禁用等

第二步:拖出一个向下的箭头图标,挑个你喜欢的,设计好交互动作,悬停、选中、按下、禁用等

第三步:拖出一个中继器,这回你没得选,拖系统自带的那个


第四步:设置中继器属性

1、删除行,几个下拉选项就留几行数据

2、更改列名,不要用乱七八糟的命名,好好命名才能提高制作效率,要不然视力会下降的厉害

3、设置交互,每项加载时,设置中继器初始加载时的数据显示,跟着下面图片的节奏动一动


4、设置自己要的按钮选项,同样跟着下面图片的节奏动一动


第五步:设置中继器中每个选项的样式,双击中继器,进到下图页面,然后样式随你喜欢修改,由于下拉框的选项都是重复的,所以我们弄一个选项的样式即可,如下图


第六步:所有基础都弄好了,现在开始设置交互,关联效果,如懒得截了,你们这么聪明,看文字应该也都会懂

动作1:中继器->载入时->隐藏自身

动作2:按钮->鼠标单击时->切换显示隐藏中继器

动作3:按钮->鼠标单击时->旋转图标180°

动作4:中继器内部矩形->鼠标单击时->隐藏中继器

动作5:中继器内部矩形->鼠标单击时->设置按钮的文字=中继器的item的列值,即item.name

动作4:中继器内部矩形->鼠标单击时->旋转图标180°

第七步:完事了,看效果!


欢迎交流,QQ:314022901,一个缺钱的产品小小汪

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容