话不多说,先看效果
为什么用中继器的方式实现下拉框
原因1:自带的下拉框太丑
嗯嗯,的确很丑,朴素的外表也没办法和华丽的原型界面相匹配
原因2:动态面板太死
动态面板的方式可以制定样式,交互等等,但是不够灵活,每次新增一个选项时,都需要重新添加交互
嗯嗯,不太方便
中继器:重复样式的神器,避免重复劳作,偷懒好帮手
直奔主题:如何使用中继器制作下拉框
第一步:拖出一个按钮框,设计好交互动作,悬停、选中、按下、禁用等
第二步:拖出一个向下的箭头图标,挑个你喜欢的,设计好交互动作,悬停、选中、按下、禁用等
第三步:拖出一个中继器,这回你没得选,拖系统自带的那个
第四步:设置中继器属性
1、删除行,几个下拉选项就留几行数据
2、更改列名,不要用乱七八糟的命名,好好命名才能提高制作效率,要不然视力会下降的厉害
3、设置交互,每项加载时,设置中继器初始加载时的数据显示,跟着下面图片的节奏动一动
4、设置自己要的按钮选项,同样跟着下面图片的节奏动一动
第五步:设置中继器中每个选项的样式,双击中继器,进到下图页面,然后样式随你喜欢修改,由于下拉框的选项都是重复的,所以我们弄一个选项的样式即可,如下图
第六步:所有基础都弄好了,现在开始设置交互,关联效果,如懒得截了,你们这么聪明,看文字应该也都会懂
动作1:中继器->载入时->隐藏自身
动作2:按钮->鼠标单击时->切换显示隐藏中继器
动作3:按钮->鼠标单击时->旋转图标180°
动作4:中继器内部矩形->鼠标单击时->隐藏中继器
动作5:中继器内部矩形->鼠标单击时->设置按钮的文字=中继器的item的列值,即item.name
动作4:中继器内部矩形->鼠标单击时->旋转图标180°
第七步:完事了,看效果!
欢迎交流,QQ:314022901,一个缺钱的产品小小汪
网友评论