条件交互
条件是附加在交互事件上的特殊要素，摹客3条件机制允许用户设定条件规则，以使交互事件只有在满足给定条件时才能够触发。 通过 “事件触发→条件判断→执行动作” 的链路，让静态 UI 元素响应用户操作或系统状态变化。
什么是条件交互
条件交互是一种 “如果…就…” 的逻辑规则，让原型不只是静态画面，而是能根据用户输入或操作，做出不同反应。
-
简单理解：
-
if：如果发生了 A，就执行 B
-
else if：如果不是 A，但满足 C，就执行 D
-
else：如果以上条件都不满足，就执行 E
-
-
能实现的场景举例：
-
登录验证：如果账号和密码都正确 → 跳转首页，否则 → 提示错误。
-
问卷/表单：如果选择“企业用户” → 显示公司名称输入框，否则 → 隐藏。
-
数量限制：如果已选商品数量 ≥ 3 → 禁用“继续添加”按钮。
-
如何开始使用条件交互
添加触发事件
在使用条件交互前，需要为交互添加触发事件，选择后添加条件判断。
添加条件判断
点击设置条件 → 输入判断规则，例如密码输入框内容 = “123456”；
可以继续添 加 else if，扩展更多分支逻辑
最后可加 else，作为兜底逻辑
这里以登录场景为例，添加了账号输入框、密码输入框以及登录按钮，并添加条件判断：
场景说明
以下操作说明，以此场景为例，用户点击“登录”按钮时：
-
If 条件 1：账号输入框 = admin 且 密码输入框 = 123456 → 跳转到首页 ✅
-
Else If 条件 2：账号输入框 ≠ admin → 显示提示 “手机号不正确” ❌
-
Else If 条件 3：密码输入框 ≠ 123456 → 显示提示 “验证码错误，请重试” ❌
操作步骤
- 添加页面元素
- 输入框A：账号输入框
- 输入框B：密码输入框
- 按钮：登录按钮
- 文本提示1：账号不存在（默认隐藏）
- 文本提示2：密码错误，请重试（默认隐藏）
- 页面跳转目标：首页
注意：数值输入框请切换输入框类型为数字。
-
设置按钮交互
- 添加触发事件：点击 → 条件判断
-
配置条件判断
If 条件 1：账号输入框 = admin 且 密码输入框 = 123456 动作：跳转到“首页”
Else If 条件 2：账号输入框 ≠ admin 动作：显示提示 “账号不存在”
Else If 条件 3：密码输入框 ≠ 123456 动作：显示提示 “密码错误，请重试”
- 预览效果
点击右上角预览，可在当前窗口预览交互效果。
以上就是简单的登录页面条件交互的实现方式，当然也可以根据实际需求进行扩展。
了解条件交互运算逻辑
在通过上方实操后，我们知道了如何使用条件交互，下面介绍一下条件交互的运算逻辑和运算规则，帮助实现更高阶的条件交互。
- 基础运算符：表达式的 “基本语法”
条件交互的运算符，覆盖数值、字符串、布尔值的运算及比较，我们需要明确运算符适用场景（避免类型运算错误）。
| 运算符分类 | 具体符号 / 逻辑 | 核心作用 | 示例（结合变量 / 值） | 操作限制说明 |
|---|---|---|---|---|
| 算术运算符 | + | 数值型，加法运算 | $quantity + 1（数量 + 1） | 不可直接与字符串运算（需类型转换） |
| - | 数值型，减法运算 | $price - 10（价格减 10） | 同上 | |
| * | 数值型，乘法运算 | $count * $unitPrice（数量 × 单价） | 同上 | |
| / | 数值型，除法运算（保留小数） | $total / 3（总额除以 3） | 除数不可为 0（工具自动拦截错误） | |
| % | 数值型，取余运算 | $num % 2（判断奇偶数） | 同上 | |
| 字符串运算符 | + | 字符串拼接 | "Hello," + $username | 仅支持 +，其他不适用 |
| 比较运算符 | == | 判断相等 | $inputValue == "admin" | 不同类型默认 false |
| != | 判断不等 | $status != "active" | 同上 | |
| > | 大于 | $age > 18 | 字符串比较按 ASCII | |
| < | 小于 | $deadline < $currentDate | 同上 | |
| >= | 大于等于 | $score >= 60 | 同上 | |
| <= | 小于等于 | $stock <= 0 | 同上 | |
| 逻辑运算符 | && | 逻辑且 | ($isLogin && $isVip) | 短路特性：左侧 false 时右侧不执行 |
| || | 逻辑或 | ($isNewUser || $total > 100) | 短路特性：左侧 true 时右侧不执行 | |
| ! | 逻辑非 | !$isAgreed | 仅作用于布尔值 / 条件 |
- 运算规则：确保表达式可解析、无歧义
需明确运算符优先级、类型匹配规则，避免配置时出现逻辑错误。 （1）运算符优先级（从高到低）
- 括号（
()）：优先计算括号内表达式（如(a+b)*c先算 a+b） - 算术运算：
*、/（乘除）→+、-（加减） - 比较运算：
>、<、>=、<=→==、!=（等于/不等于） - 逻辑运算：
!（非）→&&（且）→||（或）
（2）类型匹配规则
- 数值型变量只能与数值运算（如 “数量 + 1” 正确，“数量 +‘个’” 需手动转换类型）
- 字符串拼接仅支持 “+”（如 “‘用户’+username”），不可与数值直接运算（后续需用函数转换）
- 布尔值可被视为 0（false）和 1（true）参与算术运算（如 “isVIP + 1”，VIP 用户返回 2，非 VIP 返回 1）