中继器制作选项三级联动

用省市级去做,这明显不是我的风格,所以,我要用我玩的游戏门派来做!

这个游戏分为9大门派,有输出、辅助两大类,其中输出又有法术输出和物理输出,辅助有治疗和控制。(

别问我是什么游戏,我不是这个游戏的托儿~)

使用矩形画出“当前选项”,后面加个代表这个选项是可以下拉的。然后对应每个选项,使用中继器构建出对应的数据。

class1:一级选项列表内容

class2:二级选项列表内容

class3:三级选项列表内容

图上标的class2+class3的意思就是说,这个中继器要包含二、三级所有选项列表的内容,如图右侧所示,每个三级选项对应归属的二级内容要对应填写进去。

给每个元件命名,上面三个当前选中项分别叫一/二/三级选中,下面的中继器分别叫一/二/三级中继器,

以免做交互的时候分不清元件,然后给每个中继器设置每项载入时载入对应文字的交互。

为了美观,我们需要再对中继器内的矩形细化下,三个中继器都要这样做哦,可以做好一个之后直接复制到其他的。

将矩形设置为只有左右两侧有边框(样式→边框→边框可见性),然后在最下面画一条水平线,隐藏。

每项载入时增加一个新的交互,判断[[Item.isLast]]的值如果等于true,那么就显示这条水平线。//islast的意思是说,判断加载的这项是不是中继器里最后一项了,true=是最后一项的意思,那么就显示这条水平线。

鼠标悬停矩形上的时候,需要矩形变成蓝底白字。选中矩形,右侧属性→交互样式设置→鼠标悬停,将字体颜色勾选并设置为白色(#FFFFFF),将填充颜色勾选并设置为蓝色(#1E90FF)。

由于二/三级中继器会根据会根据上一级中继器的选择而变化,所以我们需要用中继器第一个选项的文字赋值到【二/三级选中】中。判断是否为第一项的函数是isFirst,与isLast类似,不详细解释了。

然后进入一级中继器中,设置点击矩形时的交互。点击后要做2件事:

1)将【一级选中】的文字设置为当前点击的这个矩形上文本

2)根据所选的文本,筛选【二/三级中继器】的内容。//例如果我选的是辅助,那么就将【二级中继器】中class1等于当前文本的内容筛出,再将【三级中继器】中class2等于【二级选中】文本的内容筛出。//T_class2是局部变量,指向【二级选中】的文本。

然后进入二级中继器中设置单击动作,将【三级中继器】中class2等于当前文本的内容筛出。

至此,三级联动功能基本完工

,但还需要优化。在首次加载时,我们需要【二/三级中继器】根据【一级选中】的文字进行筛选,只要将【一级中继器】中的2个筛选复制出来,粘贴到【一级选中】载入时即可。

最后2步,点击【一/二/三级选中】时,显示对应中继器,更多选项弹出效果。点进去到【一/二/三级中继器】里面的矩形点击事件,点击后隐藏对应中继器。

大!功!告!成!

本文章乃是转载文章,本文章作者:Synmo梦儿,公众号:mhAxure

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

推荐阅读更多精彩内容

  • 废话不多说,直接开干。。。 第一步:拖控件:三级标题一个(自己做的组件)、左右箭头各一个,直线一条、矩形三个、中继...
    青草上的阳光阅读 2,152评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,269评论 19 139
  • 现在是洛杉矶时间2016年4月13日凌晨零点。再过十九个小时三十分钟,科比·布莱恩特将迎来他人生中最后一场职...
    琴疏阅读 374评论 0 0
  • 文|刘小刘 第一次见到夏天,何阳就觉得她像极了自己早夭的妹妹。 一样的肌肤似雪,一样的眉头犯愁,连眼角的那滴泪痣的...
    南贝叶阅读 840评论 25 21
  • 我在夜晚的街道上走着,周围人行色匆匆。 我路过一家面馆里面播放着生日歌,我路过隔壁巷子老人面对着纸堆与火烛。生日歌...
    娜娜二号机阅读 213评论 0 0