Loading
介绍 延迟 Loading 和 保持 Loading
Loading Delay
当服务在极短时间内(如 200ms 内)完成时,立即显示加载动画会导致用户看到“一闪而过”的提示,反而造成视觉干扰。通过设置延迟阈值(如 300ms),仅在操作耗时超过阈值时显示加载状态,可显著减少界面抖动
通过设置loadingDelay,可以延迟 loading 变成 true 的时间,有效的防止闪烁
当我们把 loadingDelay 设置成
300ms,然而接口实际返回时间是400ms,这时还是会出现闪烁的情况,我们可以使用 loadingKeep 来解决这个问题
Loading Keep
loadingKeep 是一个用于保持加载状态的配置项,通常在接口返回时间较短或 loadingDelay 设置不当时,避免 loading 状态出现闪烁。
loading 保持规则
- 当
请求时间少于loadingKeep,则loading的最终时间为loadingKeep - 当
请求时间大于loadingKeep,则loading的最终时间为请求的时间
下面的示例中接口请求是 200ms,保持时间为 600ms,Loading 最终会在 600ms 后关闭
API
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| loadingDelay | MaybeRef<number> | - | 指定 loading 的延时打开时间 (毫秒) |
| loadingKeep | MaybeRef<number> | - | 指定 loading 的持续时间 (毫秒) |
