Vue實現(xiàn)骨架屏的示例代碼

更新時間：2023年03月16日 16:44:50 作者：Saga Two

骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu)。本文將利用Vue實現(xiàn)簡單的骨架屏，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

vue實現(xiàn)頁面加載占位

效果如下

思路與實現(xiàn)

頁面加載時用戶等待，此時與用戶交互的方式通常有等待層、進(jìn)度條、加載動畫等；本次介紹加載占位，把頁面即將展示的樣子用css背景展示出來，等數(shù)據(jù)返回后即可進(jìn)行頁面渲染，可以有效減少頁面抖動。

頁面組成如下：

占位子組件：使用純css編寫；

獲取數(shù)據(jù)的交易：此處使用setTimeout模擬查詢耗時；

數(shù)據(jù)展示組件；

代碼如下：

<template>
  <div>
    <title-bar :title="title" @goBack="goback"></title-bar>
    <div v-if="res==true">
      <div v-for="(prd, index) in productList" :key="index">
        <prd-item :prd="prd" @toPrdDetail="toPrdDetail"></prd-item>
      </div>
    </div>
    <list-loading v-else></list-loading>
  </div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
import ListLoading from '@/components/ListLoading';
import PrdItem from "./components/PrdItem";
export default {
  name: "hgang", // 分割線
  components: {
    ListLoading,
    TitleBar,
    PrdItem
  },
  data() {
    return {
      res: false, // 數(shù)據(jù)是否已經(jīng)返回
      title: '產(chǎn)品列表',
      productList: [
        {
          imgPath: "apple-1001.png",
          name: "Apple iPad Air 平板電腦(2020新款)",
          price: "4799.00",
          sale: "5",
          ranking: "10000+評價 平板熱賣第5名",
          prdShopName: "Apple官方旗艦店"
        }
      ]
    };
  },
  mounted() {
    console.log(111);
    this.waitDateload();
  },
  methods: {
    waitDateload() {
      console.log(this.res);
      setTimeout(() => {
        this.res = true;
        console.log(this.res);
      }, 5000);
    },
    toPrdDetail() {
      // 
    },
    goback() {
      // 
    }
  },
};
</script>

其中：