Vue實現骨架屏的示例代碼

Posted on by

vue實現頁面加載占位

效果如下

思路與實現

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

頁面組成如下：

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

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

數據展示組件；

代碼如下：

<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, // 數據是否已經返回
      title: '產品列表',
      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>

其中：

  • ListLoading：加載占位子組件，使用css編寫，另加閃光動畫效果；
  • PrdItem：數據返回之後頁面渲染子組件；
  • res：控制占位組件與實際頁面切換變量，通過v-if來控制頁面展示，數據返回立刻重新渲染頁面。

到此這篇關於Vue實現骨架屏的示例代碼的文章就介紹到這瞭,更多相關Vue骨架屏內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：