美文网首页Axure实用系列教程
七步实现中继器方式制作下拉框

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

作者: Me姓陈的 | 来源:发表于2019-07-11 23:08 被阅读0次

    话不多说,先看效果


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

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


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

    原因2:动态面板太死

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

    嗯嗯,不太方便

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

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

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

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

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

    第四步:设置中继器属性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    相关文章

      网友评论

        本文标题:七步实现中继器方式制作下拉框

        本文链接:https://www.haomeiwen.com/subject/sbvjkctx.html