1. 主页 > 行业资讯 > 设计文章 >

一种处理多条件交互判断的优雅方法

编者按:在最后一篇文章中,作者分析了不同场景下复读机的风格处理方法。本文继续分享对多重条件判断的更优雅的处理。

上一期《复读机不同场景下的风格处理》留下了一个话题,如何处理多重条件判断。即如果要满足多个条件,如何遍历每个场景并处理。继续看最后一个问题:

有新消息,有免打扰有新消息,无免打扰无新消息,有免打扰无新消息,无免打扰

正常思路和前面解释的一样,遍历以上四个场景,即:ifnew _ msg = = & # 82201”而静音= = & # 8221;1″

–显示小红点,显示请勿打扰图标

elseifnew _ msg = = & # 82211″而静音= = & # 8221;0″

–显示小红点,不显示请勿打扰图标

elseifnew _ msg = = & # 82210″而静音= = & # 8221;1″

–不显示小红点,显示请勿打扰图标

否则ifnew _ msg = = & # 82210″而静音= = & # 8221;0″

–不要显示小红点,也不要显示请勿打扰图标

如果有三个以上的条件,那么每个表达式的判断就会比较多,很麻烦。

第一,交互处理

在今天的方法中,使用Axure是一个不起眼的动作:触发事件,可能很少使用。

在任意某个元件上,添加一个事件,例如单击事件。这个事件只判断一个条件,例如如果有新消息就显示小红点,否则不显示。在另外一个元件上,重复1~2的步骤,处理其它条件判断。在中继器的每项加载事件里,分别触发新加的元件上的事件。

这样做的优点是:

顶层的事件处理逻辑简单每个条件单独判断,逻辑清晰

根据以上步骤,我们来看看如何处理最后一个问题:

1)在任何组件上,添加一个事件,如click事件

为了不影响现有的内容,我经常添加一个热区组件,因为它在界面中是不可见的,同时阻止它响应鼠标事件,并隐藏它,这样它根本不会影响我们的界面操作。

【Axure9百例】46.多条件判断

2)此事件只判断一个条件,比如有新消息,会显示小红点,否则不显示

添加一个点击事件,也可以添加一个双击事件,然后触发这个事件。事件,如果等于1,则显示小红点,否则隐藏。

【Axure9百例】46.多条件判断

3)在另一个组件上,重复步骤1~2以处理其他条件判断

同样,添加了另一个热区组件来处理静音判断。

【Axure9百例】46.多条件判断

4)在中继器的每个加载事件中,分别触发新添加元素上的事件

回到中继器的每个加载事件,并简化其原始事件处理。

【Axure9百例】46.多条件判断

只有设定文本和两个触发事件,在触发事件内部进行逻辑判断。因为复读机的逻辑是可以实时看到的,看预览效果。

【Axure9百例】46.多条件判断

实际预览效果:

【Axure9百例】46.多条件判断

检查数据,看它是否符合给定的条件:

【Axure9百例】46.多条件判断

第一个显示新消息,显示免打扰图标(new_msg=1,mute=1)。第二个都不显示(new_msg=0,mute=0)。第三个只显示免打扰(new_msg=0,mute=1)。第四个只显示新消息(new_msg=1,mute=0)。

是不是处理的比较优雅?

如果有第三个条件,只需添加一个热区,点击事件处理,然后触发其事件即可。

二.总结

事件触发就像一个函数调用,给另一个元素添加逻辑,然后触发它。这种方法的优点是逻辑简单,思路清晰。

一定要试一试~

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/511.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息