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 的持续时间 (毫秒) |