构建加载状态与流畅交互的精妙艺术

原创

繁依Fanyi 2025-06-05 13:48:18 ©著作权

文章标签 加载加载动画数据加载 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者繁依Fanyi的原创作品，请联系作者获取转载授权，否则将追究法律责任

在现代 Web 应用中，加载状态模块是一种必不可少的设计，它不仅能提升用户体验，还可以避免重复数据请求带来的浪费与复杂性。在这一设计中，我们采用了一种简单而优雅的实现，通过 isLoading

构建加载状态与流畅交互的精妙艺术_加载

加载动画：用户体验的第一印象

当页面正在获取数据时，用户最直观的感受便是页面是否响应。因此，加载动画成为填补数据延迟的桥梁。在这段实现中，一个简洁而直观的加载动画是由 isLoading

登录后复制

<div v-if="isLoading" class="loading-spinner">
  <div class="spinner"></div>
</div>

通过 v-if

登录后复制

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

如此简单的动画设计既节省了资源，也保持了页面的流畅性。我们专注于用户的注意力，确保加载过程清晰且毫不繁琐。

数据获取状态：灵活而高效的管理

在数据驱动的应用中，频繁的重复请求可能带来性能问题。在这里，通过 isLoading

登录后复制

async fetchImages() {
  if (this.isLoading) return; // 避免重复加载
  this.isLoading = true;

  try {
    const response = await axios.post('/get-gallery-images', {
      page: this.currentPage,
      page_size: this.perPage,
    });
    const { images, total } = response.data;

    this.images = [...this.images, ...images];
    this.totalPages = Math.ceil(total / this.perPage);
    this.currentPage++;
  } catch (error) {
    console.error('数据加载失败:', error);
  } finally {
    this.isLoading = false; // 加载完成后关闭标志
  }
}

这个逻辑可以看作是两个层次的设计艺术：

节流控制：通过

isLoading

登录后复制

handleScroll() {
  const { scrollTop, clientHeight, scrollHeight } = this.$el;
  if (!this.isLoading && scrollTop + clientHeight >= scrollHeight - 200) {
    this.fetchImages();
  }
}

200px 的偏移量为加载提供了足够的提前时间，使数据无缝加载到页面中。