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如何实现页面加载占位”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。