快捷導(dǎo)航

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

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

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

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

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

下面我們就來(lái)看一下如何在Vue中實(shí)現(xiàn)頁(yè)面骨架屏。

首先，我們可以新建一個(gè)Skeleton.vue組件，用來(lái)編寫骨架屏的結(jié)構(gòu)和樣式。示例代碼如下：

<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>

上述代碼中，我們定義了一個(gè)骨架屏的結(jié)構(gòu)，包括頭部和內(nèi)容部分，內(nèi)容部分包含了三個(gè)占位的項(xiàng)目。接下來(lái)，在需要展示骨架屏的頁(yè)面中，我們可以根據(jù)需要?jiǎng)討B(tài)地控制骨架屏的顯示。示例代碼如下：

<template>
  <div>
    <Skeleton v-if="loading" />
    <div v-else>
      <!-- 真實(shí)內(nèi)容 -->
    </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>

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

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

方法補(bǔ)充

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

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

1.使用vue-vue-content-loader

打開一個(gè)頁(yè)面時(shí)候，頁(yè)面內(nèi)容多，接口請(qǐng)求慢或者說(shuō)加載速度慢時(shí)，會(huì)導(dǎo)致頁(yè)面出現(xiàn)較長(zhǎng)時(shí)間出現(xiàn)空白頁(yè)面，影響的體驗(yàn)感，可以使用vue-content-loader解決這些場(chǎng)景問(wèn)題。

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.使用標(biāo)簽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>

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

您可能感興趣的文章: