骨架屏 - 技术栈

1. 骨架屏的作用与项目应用场景

骨架屏（Skeleton Screen）是一种在数据加载期间用灰色块、占位图等模拟页面结构的技术，提升用户感知速度和体验。常用于首页、新闻详情、产品列表等数据异步加载的页面。

在本项目（如 web-company、web-admin），首页、新闻列表、产品列表等页面都适合用骨架屏优化加载体验。

2. 项目中骨架屏的实现方法

以 web-company/src/views/News.vue 为例：

（1）新建骨架屏组件

在 web-company/src/components/SkeletonNews.vue：

vue 复制代码

<template>
  <div class="skeleton-news">
    <div class="skeleton-title"></div>
    <div class="skeleton-meta"></div>
    <div class="skeleton-content"></div>
  </div>
</template>

<style scoped>
.skeleton-news {
  padding: 16px;
}
.skeleton-title,
.skeleton-meta,
.skeleton-content {
  background: #eee;
  border-radius: 4px;
  margin-bottom: 12px;
  animation: skeleton-loading 1.2s infinite linear alternate;
}
.skeleton-title { width: 60%; height: 24px; }
.skeleton-meta { width: 30%; height: 16px; }
.skeleton-content { width: 100%; height: 80px; }
@keyframes skeleton-loading {
  0% { background-color: #eee; }
  100% { background-color: #f5f5f5; }
}
</style>

（2）在页面中使用骨架屏

vue 复制代码

<template>
  <div>
    <SkeletonNews v-if="loading" />
    <div v-else>
      <!-- 正常新闻内容 -->
      <h1>{{ news.title }}</h1>
      <div>{{ news.meta }}</div>
      <div v-html="news.content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import SkeletonNews from '@/components/SkeletonNews.vue'

const loading = ref(true)
const news = ref({ title: '', meta: '', content: '' })

onMounted(async () => {
  // 模拟异步加载
  setTimeout(() => {
    news.value = { title: '新闻标题', meta: '2024-06-01', content: '新闻内容...' }
    loading.value = false
  }, 1500)
})
</script>

二、问题

1. 问：你在项目中是如何实现骨架屏的？为什么要用骨架屏？

答：

在本项目（如 web-company 的新闻详情页），我新建了骨架屏组件（SkeletonNews.vue），在数据加载期间用灰色块模拟页面结构。这样用户在等待数据时不会看到空白页面，提升了加载体验和感知速度。

2. 问：骨架屏和 loading 动画的区别是什么？项目中为什么选择骨架屏？

答：

loading 动画通常是转圈等简单提示，用户无法预知页面结构。骨架屏则模拟真实页面布局，让用户提前感知内容分布。项目中页面内容较多，骨架屏能有效减少用户焦虑，提升专业感和体验。

3. 问：骨架屏组件如何设计成可复用？项目中有实践吗？

答：

我将骨架屏封装为独立组件（如 SkeletonNews.vue），并通过 props 控制不同页面的骨架结构。这样新闻列表、产品列表等页面都能复用骨架屏组件，减少重复代码，提升开发效率。

4. 问：骨架屏如何与异步数据加载配合？项目中是怎么做的？

答：

通过 loading 状态控制骨架屏的显示与隐藏。数据请求前设置 loading=true，数据加载完成后设置 loading=false，切换为真实内容。项目中在 onMounted 钩子里异步获取数据，配合骨架屏实现平滑过渡。

5. 问：骨架屏在实际开发中遇到过哪些问题？你是如何解决的？

答：

遇到过骨架屏和真实内容切换时闪烁、骨架屏样式与实际内容不一致等问题。为此，项目中优化了骨架屏样式，保证与真实内容布局一致，并通过合理的 loading 状态管理，避免闪烁和突兀的切换。