条件式容器

场景示例

在日常制作项目过程,我们会遇到在同一个位置根据不同的条件来呈现不同内容的情况。
例如,根据不同的消费金额显示不同会员等级。
条件式容器:消费等级显示的不同奖牌

在电商类小程序中商品的加购,会让对应的按钮产生变化
条件式容器:加购和未加购状态

还有常见的,登录与未登录状态时,界面效果的不同
条件式容器 :登录和未登录界面

功能介绍

  • 条件式容器就是在不同条件下,显示不同的内容。而不同的显示内容会被放进不同的视图容器中。
  • 在项目运行时,根据满足条件的情况会显示满足条件的视图。从左至右判断,一旦有一个满足就不再向下判断了。就算有n个状态满足条件,也只会显示满足条件的最左的那个视图。

基础操作

先来看一下在Zion中怎么样添加一个条件式容器
拆分「条件式容器」这个名字,可以发现是由「条件」和「容器」这个两个词组成,因此我们需要去设置的内容就是这两个:

  1. 设置条件
  2. 设置容器

设置条件

最重要的一步,为每个视图配置条件。因为不同的视图会在对应条件满足时才会被可见。
step1. 添加状况,点击视图上方的状况名后,右侧属性面板将变为条件式子容器(也就是上述的视图容器)

step2. 将选项卡切换至「内容」
step3. 配置条件

设置容器

由于条件需要在容器的基础上进行设置,因此需要先去设置容器。
在界面聚焦模式下,从左侧工具栏中拖拽「条件式容器」进入选区,当然这也是支持再嵌套进入其他任何容器(视图、列表、其他条件容器)
在选中「条件式容器」后在右侧属性面板中选中「内容」选项卡,添加状况。
添加完状况后,根据需要在每个视图中可以自行拖入需要的组件。

执行逻辑

接着我们再来了解一下这个组件到底是如何工作的
以下图条件式容器在项目运行时为例:

  • 子容器视图的执行顺序为从左向右依次判断
  • 右侧的可选状况的执行顺序为从上向下依次判断
  • 当条件成立时,判断结束并显示该条件下的容器内容;当条件不成立时就判断下一项。
  • 右侧红色区域的状况名称和左侧绿色区域的子容器名称相同
    • tips:子容器的顺序可以通过在右侧属性面板拖拽状况名改变

对比

同一个例子的三种表达方式
案例:消费能获得不同的奖章,奖章的类型有金、银、铜三种。规定累计消费未满500元能获得铜奖牌、累计消费到达501-5000元能获得银奖牌、累计消费超过5000元能获得金奖牌,未消费的人则没有奖牌只显示普通用户的字样。

Tips:

特殊的状况: 空白项

空白项是数据还在加载时停留的状况, 不可删除也不要把该状况修改成其他名称并在其中进行组件配置(俗称:不要随便动它!!)
一般在「空白项」前配置一个条件为「总是」的状况, 否则数据进入default之后无法再次匹配其他状况, 而是停留在上一次匹配的状况

条件相同的切换

不设置条件时,视图的默认条件为「总是」。然而有时候我们确实会遇到用条件判断来进行子容器视图的切换就不合适的情况。例如切换商品的展示样式,从缩略图切换到列表视图。
这时候我们可以通过「切换视图条件」来实现条件式子容器视图切换

2022-11-29
4 1