跳转到内容

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

属性类型默认值描述
loadingDelayMaybeRef<number>-指定 loading 的延时打开时间 (毫秒)
loadingKeepMaybeRef<number>-指定 loading 的持续时间 (毫秒)