Vue如何實現頁面加載占位

這篇文章主要介紹了Vue如何實現頁面加載占位的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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如何實現頁面加載占位”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。