一文詳解Vue中如何實現(xiàn)頁面骨架屏

更新時間：2024年03月10日 10:11:36 作者：JJCTO袁龍

為了提升頁面加載速度,我們可以使用頁面骨架屏技術來優(yōu)化用戶感知,下面就跟隨小編一起學習一下如何在vue中實現(xiàn)頁面骨架屏吧

在前端開發(fā)中，頁面加載速度是一個至關重要的因素，用戶體驗也會直接受到影響。為了提升頁面加載速度，我們可以使用頁面骨架屏技術來優(yōu)化用戶感知。在Vue中，實現(xiàn)頁面骨架屏的方法非常簡單。

頁面骨架屏的原理是在頁面的加載過程中，首先展示一個簡單的骨架結構，以此告訴用戶頁面正在加載中，等待內容填充。一旦真實內容加載完成，就會替換掉骨架結構，呈現(xiàn)完整的頁面。

下面我們就來看一下如何在Vue中實現(xiàn)頁面骨架屏。

首先，我們可以新建一個Skeleton.vue組件，用來編寫骨架屏的結構和樣式。示例代碼如下：

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

<style>
.skeleton {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  padding: 20px;
}

.skeleton-header {
  width: 100%;
  height: 50px;
  background: #e0e0e0;
  margin-bottom: 20px;
}

.skeleton-content {
  display: flex;
  justify-content: space-between;
}

.skeleton-item {
  width: 30%;
  height: 100px;
  background: #e0e0e0;
}
</style>

上述代碼中，我們定義了一個骨架屏的結構，包括頭部和內容部分，內容部分包含了三個占位的項目。接下來，在需要展示骨架屏的頁面中，我們可以根據(jù)需要動態(tài)地控制骨架屏的顯示。示例代碼如下：

<template>
  <div>
    <Skeleton v-if="loading" />
    <div v-else>
      <!-- 真實內容 -->
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      loading: true
    };
  },
  created() {
    // 模擬數(shù)據(jù)加載
    setTimeout(() => {
      this.loading = false;
    }, 2000);
  },
  components: {
    Skeleton
  }
};
</script>

在上述代碼中，我們通過一個loading變量來控制骨架屏的顯示與隱藏。在頁面加載完成前，loading為true，顯示骨架屏；頁面加載完成后，loading變?yōu)閒alse，隱藏骨架屏，展示真實內容。

通過以上代碼，我們就實現(xiàn)了在Vue中如何實現(xiàn)頁面骨架屏的功能。頁面骨架屏不僅可以提升用戶體驗，還可以讓頁面看起來更加專業(yè)和流暢。在實際項目中，可以根據(jù)具體需求來進行進一步的定制和優(yōu)化。

方法補充

除了上文的方法，小編還為大家整理了其他vue實現(xiàn)骨架屏的方法，希望對大家有所幫助

Vue3API-Suspense實現(xiàn)骨架屏加載

1.使用vue-vue-content-loader

打開一個頁面時候，頁面內容多，接口請求慢或者說加載速度慢時，會導致頁面出現(xiàn)較長時間出現(xiàn)空白頁面，影響的體驗感，可以使用vue-content-loader解決這些場景問題。

2.安裝 npm i vue-content-loader

skyeLoadVue.vue

<script>
import { ContentLoader } from 'vue-content-loader'
export default {
  components: {
    ContentLoader,
  },
}
</script>

<template>
  <!-- <content-loader></content-loader> -->
  <ContentLoader viewBox="0 0 250 110">
  <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
  <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
</ContentLoader>
</template>

3.使用標簽Suspense包裹

<script>
// 使用異步組件
import asyncomVue from "./asyncom.vue";
// 骨架屏占位組件
import skyeLoadVue from "./skyeLoad.vue";
export default {
  components: {
    asyncomVue,
    skyeLoadVue,
  },
};
</script>

<template>
  <Suspense>
    <!-- 包含異步的組件 -->
    <asyncomVue />
    <template #fallback>
      <!-- 骨架屏占位組件 -->
      <skyeLoadVue />
    </template>
  </Suspense>
</template>

到此這篇關于一文詳解Vue中如何實現(xiàn)頁面骨架屏的文章就介紹到這了,更多相關Vue骨架屏內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: