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 TitleBarfrom"@/components/TitleBar";import ListLoadingfrom'@/components/ListLoading';import PrdItemfrom"./components/PrdItem";exportdefault{
  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来控制页面展示，数据返回立刻重新渲染页面。