条件式容器
应用场景
条件式容器用于根据不同条件动态展示不同内容。常见场景包括：
- 同一页面下，登录/未登录展示不同内容
- 点击按钮切换视图（如验证码倒计时）
- 结合选择视图实现类似标签栏或展开/收起目录
添加条件式子容器
可在条件式容器中添加/修改/删除子容器，实现不同条件下的内容展示。例如登录页面可根据“未登录”“已登录-用户”“已登录-管理员”分别添加子容器。
💡
条件式容器有一个默认状态“加载中”，页面数据加载时会显示该子容器。此状态不可删除或设置条件，建议勿做修改！
点击【进入聚焦模式】按钮可配置各子容器的显示条件及内容。
条件判断顺序逻辑
子容器判断顺序为从左到右（或添加顺序自上而下）。条件成立即显示对应内容，否则依次判断下一个，全部不成立时显示上一次匹配结果。
💡
合理设置条件顺序可避免逻辑冲突，提升页面体验。
设计配置
- 可分别设置容器及子容器的宽高。
- 若需父容器高度随子容器变化，设置父容器高度模式为“适应”。如子容器一高度为 100，子容器二为 200，切换条件时父容器高度自动调整。
使用示例
条件不同，显示视图不同
- 用户权限不同，页面内容不同。例如 type=hr 显示 HR 视图，type=面试官 显示面试官视图。
| 配置示例 | 配置示例 |
|---|---|
 |  |
| 效果示例 | 效果示例 |
|---|---|
 |  |
- 用户登录状态不同，显示不同视图。未登录时用户名为空，已登录时用户名非空。
💡
如需登录后自动切换视图，可在一键授权按钮配置“刷新当前用户数据”或“切换视图”行为。
| 配置示例 | 效果示例 |
|---|---|
 |  |
点击按钮切换视图
💡
适用于条件均为“总是”，通过按钮配置“切换视图条件”行为实现视图切换。
- 账号密码登录时，密码输入框通过条件式容器切换明文/密文显示。
| 配置示例 | 效果示例 |
|---|---|
 |  |
- 电商小程序购物车状态切换：点击按钮切换“未加购/已加购”状态。
💡
如需根据购物车状态预判初始视图，务必设置好条件，避免所有条件均为“总是”。
| 配置示例 | 效果示例 |
|---|---|
 |  |
结合选择视图
- 选择视图结果不同，条件式容器显示不同视图，类似不可滚动的标签栏。
- 商城商品分类：点击父级分类展开子级分类，右侧商品列表联动展示。
Last updated on