Varlet UI 中 LoadingBar 在 Vue3 路由守卫中的使用技巧

在基于 Vue3 和 Varlet UI 开发移动端应用时，LoadingBar 组件是一个常用的页面加载状态指示器。然而，当将其与 Vue Router 的路由守卫结合使用时，开发者可能会遇到一些意料之外的行为。

问题现象

许多开发者反馈，在路由守卫中使用 LoadingBar 时，只有第一次切换 tabbar 时能看到加载动画，后续切换则完全看不到任何动效。具体表现为：

1. 在 beforeEach 中调用 LoadingBar.start()
2. 在 afterEach 中调用 LoadingBar.finish()
3. 只有首次切换有效，后续切换无动画效果

问题根源

经过分析，这个问题源于 LoadingBar 组件内部的一个设计机制：200ms 的启动延迟。这个机制是为了避免在快速加载的页面上显示一闪而过的加载动画，从而提供更好的用户体验。

当页面加载速度非常快（小于200ms）时，如果在 LoadingBar 完全启动前就调用了 finish() 方法，动画效果就不会显示。这解释了为什么在路由守卫中使用时会出现动画"失效"的现象。

解决方案

临时解决方案

开发者可以手动在 afterEach 中添加延迟：

router.afterEach(() => {
  setTimeout(() => {
    LoadingBar.finish()
  }, 300)
})

这种方法通过确保 finish() 在 start() 完全启动后执行，保证了动画效果的显示。

官方推荐方案

Varlet UI 在 3.3.13 版本中新增了配置选项，开发者可以通过以下方式自定义延迟时间：

LoadingBar.setDefaultOptions({
  finishDelay: 300
})

这种方法更加优雅，且便于统一管理配置。

最佳实践建议

虽然可以通过调整延迟时间来强制显示动画，但官方建议保持默认配置。原因在于：

1. 对于现代Web应用，许多页面加载速度已经非常快
2. 一闪而过的加载动画反而会破坏用户体验的流畅性
3. 默认的200ms阈值是经过用户体验研究得出的平衡点

只有在确实需要确保动画显示的特殊场景下，才建议调整这些参数。

技术实现原理

深入了解 LoadingBar 的工作原理有助于更好地使用它：

1. 启动阶段：调用 start() 后，组件会先进入准备状态
2. 动画延迟：默认200ms后才真正开始显示动画
3. 完成阶段：调用 finish() 会平滑地完成进度条并隐藏
4. 快速完成处理：如果在动画开始前就完成，则跳过动画直接隐藏

这种设计避免了不必要的视觉干扰，特别是在快速加载的SPA应用中。

总结

Varlet UI 的 LoadingBar 组件在路由守卫中的"异常"行为实际上是精心设计的用户体验优化。开发者应该理解其背后的设计理念，根据实际需求选择合适的配置方式。在大多数情况下，保持默认配置是最佳选择；只有在特定场景下，才需要考虑调整延迟参数。