vue骨架屏是什么 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue骨架屏是一种前端加载优化技术，用于提高页面加载速度和用户体验。骨架屏是在页面内容尚未加载完成时，用一种简单的加载动画替代实际内容的技术。它模拟了页面的结构，给用户一种页面正在加载的感觉，避免了页面空白的视觉效果，提升了用户体验。

Vue骨架屏的实现原理是通过CSS和JavaScript来创建一个简化版的页面结构，然后在真实内容加载完成之前，将其展示给用户。具体实现步骤如下：

首先，需要使用Vue组件来创建骨架屏组件。在骨架屏组件中，我们只需要定义页面的结构，不需要关心具体内容。

<template>
  <div class="skeleton">
    <div class="skeleton-header"></div>
    <div class="skeleton-content"></div>
    <div class="skeleton-footer"></div>
  </div>
</template>

<style>
.skeleton {
  /* 骨架屏容器样式 */
}

.skeleton-header {
  /* 头部骨架样式 */
}

.skeleton-content {
  /* 内容骨架样式 */
}

.skeleton-footer {
  /* 底部骨架样式 */
}
</style>

在页面的加载过程中，当数据还未加载完毕时，将骨架屏组件渲染到页面中，通过显示骨架屏来给用户一个加载中的提示。在数据加载完毕后，再将真实内容渲染到页面中替换骨架屏。

<template>
  <div>
    <skeleton v-if="isLoadingData"></skeleton>
    <real-content v-else></real-content>
  </div>
</template>

<script>
import Skeleton from './Skeleton.vue';
import RealContent from './RealContent.vue';

export default {
  components: {
    Skeleton,
    RealContent
  },
  data() {
    return {
      isLoadingData: true
    }
  },
  mounted() {
    // 模拟数据加载
    setTimeout(() => {
      this.isLoadingData = false;
    }, 2000);
  }
}
</script>

通过以上步骤，我们可以在页面加载过程中显示骨架屏，提供更好的用户体验。Vue骨架屏技术可以应用于各种类型的页面，特别适用于数据加载较慢的情况，能够有效提升页面加载速度和用户满意度。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

vue骨架屏是一种用于优化页面加载体验的技术。骨架屏是在页面内容未加载完全之前展示给用户的一种占位符，通过模拟页面的布局和样式，使用户在页面加载过程中能够感知到页面正在加载，并减少用户的等待时间，提升用户体验。

下面是关于vue骨架屏的一些重要点：

骨架屏的原理：骨架屏实际上是一个静态页面，而不是真正的内容。它通过使用纯CSS或预渲染技术，模拟出页面的布局和样式，给用户呈现出占位符，让用户有一种页面正在加载的感觉。
实现骨架屏的方法：在Vue中实现骨架屏有多种方法。其中一种方法是使用Vue的skeleton插件，该插件可以根据页面的结构自动生成骨架屏，同时提供了一系列的配置选项以满足不同的需求。另一种方法是手动编写和布局骨架屏组件，使用CSS来定义样式。
骨架屏的使用场景：骨架屏可以用在任何需要优化页面加载体验的场景。特别是在网络较慢的情况下，骨架屏可以有效减少用户的等待时间，提高用户的满意度。骨架屏也可以用于需要异步加载数据的页面，让用户在数据加载过程中不感到页面空白。
骨架屏的设计原则：设计一个好的骨架屏需要考虑多个方面。首先，骨架屏的布局和样式应该与实际内容一致，以便用户可以在实际内容加载完成后无缝过渡。其次，骨架屏应该尽量简洁明了，不要添加过多的细节和复杂的动画，以免用户对加载过程感到困惑。最后，骨架屏的加载时间应该尽量短，以便用户能够尽快看到实际内容。
骨架屏的效果评估：评估骨架屏的效果可以通过多种方式进行。一种方法是使用Lighthouse等性能测试工具，评估页面的加载性能。另一种方法是进行用户调查和可用性测试，收集用户对骨架屏的反馈和体验，以进一步改进骨架屏的设计。

1年前 0条评论

worktile

Worktile官方账号

Vue骨架屏（Skeleton Screen）是一种页面加载时的占位组件，用于提高用户体验。它是在页面还未加载完成时展示的，以模拟实际内容的布局，让用户感知到页面正在加载。骨架屏通常用于长列表、动态加载内容或网络不稳定的情况下，可以帮助用户更好地理解页面结构、减少白屏时间，优化首屏加载体验。

在Vue中实现骨架屏的方式有多种，下面将详细介绍两种常见的实现方法。

方法一：基于CSS的骨架屏

首先，在项目中创建一个基础的骨架屏组件，用于占位展示。

<template>
  <div class="skeleton"></div>
</template>

<style scoped>
.skeleton {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style>

在需要展示骨架屏的组件中，通过判断数据是否加载完成来选择展示骨架屏还是实际内容。

<template>
  <div>
    <!-- 判断数据是否加载完成 -->
    <div v-if="!loading">
      <!-- 实际内容 -->
      <div v-for="item in items" :key="item.id">{{ item.title }}</div>
    </div>
    <!-- 骨架屏，loading为true时展示 -->
    <skeleton v-else></skeleton>
  </div>
</template>

<script>
import Skeleton from '@/components/Skeleton.vue';

export default {
  components: {
    Skeleton
  },
  data() {
    return {
      loading: true, // 数据是否加载完成
      items: []      // 实际内容数组
    };
  },
  mounted() {
    // 模拟异步加载数据
    setTimeout(() => {
      this.items = [
        { id: 1, title: 'Item 1' },
        { id: 2, title: 'Item 2' },
        { id: 3, title: 'Item 3' }
      ];
      this.loading = false; // 数据加载完成
    }, 2000);
  }
};
</script>

方法二：基于第三方库的骨架屏

除了手动实现骨架屏，也可以使用第三方库来简化开发。

一个常用的骨架屏库是vue-content-loader。它提供了丰富的动画效果和配置项，可以更灵活地定制骨架屏。

首先，安装vue-content-loader。

npm install vue-content-loader --save

然后，在需要展示骨架屏的组件中，引入骨架屏组件，并在模板中使用。

<template>
  <div>
    <!-- 判断数据是否加载完成 -->
    <div v-if="!loading">
      <!-- 实际内容 -->
      <div v-for="item in items" :key="item.id">{{ item.title }}</div>
    </div>
    <!-- 骨架屏，loading为true时展示 -->
    <content-loader v-else :list-style="{'margin-top': '20px'}" :animate="true">
      <rect x="10" y="0" rx="3" ry="3" width="200" height="10" />
      <rect x="10" y="20" rx="3" ry="3" width="80" height="10" />
      <rect x="10" y="40" rx="3" ry="3" width="100" height="10" />
    </content-loader>
  </div>
</template>

<script>
import { ContentLoader } from 'vue-content-loader';

export default {
  components: {
    ContentLoader
  },
  data() {
    return {
      loading: true, // 数据是否加载完成
      items: []      // 实际内容数组
    };
  },
  mounted() {
    // 模拟异步加载数据
    setTimeout(() => {
      this.items = [
        { id: 1, title: 'Item 1' },
        { id: 2, title: 'Item 2' },
        { id: 3, title: 'Item 3' }
      ];
      this.loading = false; // 数据加载完成
    }, 2000);
  }
};
</script>

以上介绍的是两种常见的Vue骨架屏实现方法，可以根据具体需求选择合适的方式来实现骨架屏效果，提升用户体验。

1年前 0条评论