先来看看效果
我们通过两组radio来分别设置样式和位置。通常的做法是选中一个radio的时候判断其它radio的状态,比如当选中样式1的时候,判断位置组的radio哪个被选中,这样一次需要做3个判断,同样当位置组的某个radio被选中时,也需要判断3次样式组哪个radio被选中了,这样要实现3种样式*3种位置=9种状态一共需要做18次判断,即便做18次判断不是个事儿,到时候也可能会把自己饶晕。可能也会有朋友说如果是变换位置,可以直接使用“移动”动作,当然这也是可以的,但如果两组radio分别控制的是样式和字号而不是位置,那移动动作就用不上了,所以今天我们探讨一种更加通用的方法:借助全局变量实现多组radio对动态面板状态的筛选。
制作动态面板状态
先理一下怎么实现示例的效果:首先动态面板要实现多少种效果,那就需要做多少种效果,这其实是个苦力活儿,在做状态的过程中要注意对各个状态的准确命令,以方便后面进行判断
在动态面板中制作不同状态
-
样式1居左
-
样式2居左
-
样式3居左
以上只是示例了各个样式居左的效果
各状态的命名要有明确区分
配置全局变量
因为我们有两组控制radio,所以我们需要通过两个全局变量来保存每组radio的状态值,比如我们现在用“type”变量对应“样式”的值,初始样式为“样式1”,通过“location”变量对应“位置”的值,初始位置为“居左”
控制全局变量
之所以通过全局变量来保存各组radio的值是因为每组radio都控制相似的状态,比如样式或者状态,那在同一时刻每组radio看我会有一个有效状态,这个状态即是全局变量中保存的状态,我们仅需要判断全局变量的值就可以知道每组radio当前的有效状态,而不用关注每组radio到底哪个状态被选中了。
以“样式1”radio为例,当它被选中时就将自己的元件文字“样式1”写入“type”变量,同理当其它radio被选中时,它们就只需要将自己的原件文字写入对应的全局变量即可
你们肯定注意到了,当radio被选中时除了写值,它还会将动态面板 “样式”先隐藏再显示出来,为什么要样做呢?
因为我们希望实现我变更了radio的选中状态时动态面板就相应的变换,也就是需要刷新动态面板的状态,但是动态面板支持的动作却没有“刷新”这个动作,但是却有一个“显示时”的动作,这样我们可以通过先将它隐藏再显示出来造出一个“刷新”效果
让动态面板响应全局变量
当以上的工作完成之后,我们还差最后一步,让动态面板每次刷新时根据全局变量的值显示对应的状态。
我们为动态面板“样式”添加一个“显示时”的用例,当显示时先判断全局变量的值,再显示对应的状态。比如我们判断当“type”等于“样式1”,“location”等于“居左”时显示状态“样式1居左”,同理,其它的状态仅需要按照全局变量的组合值做显示即可,即便有多个控制组,每个控制组有多个控制状态只需要按部就班的做判断就行了
最后,我们就能实现示例的效果,稍做改动,就可以运用到其它多组控制项对动态面板状态的筛选场景中
这里只是提供了一个比较通用的方法实现多组radio对动态面板的筛选效果,如果大家有任何疑问或者其他方法,可以通过留言一起交流~