您的位置：首页 > 编程技术 > js  >  Vue实现骨架屏的示例代码

Vue实现骨架屏的示例代码

 更新时间：2023年3月17日 13:59  点击：183 作者：Saga Two

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骨架屏内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://blog.csdn.net/m0_46309087/article/details/118440581

[!--infotagslink--]

相关文章

  • vue中activated的用法

    这篇文章主要介绍了vue中activated的用法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2021-01-03

  • 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

    这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-23

  • Antd-vue Table组件添加Click事件,实现点击某行数据教程

    这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17

  • vue 实现动态路由的方法

    这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06

  • Vue组件跨层级获取组件操作

    这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28

  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-09

  • vue 获取到数据但却渲染不到页面上的解决方法

    这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-19

  • vue项目页面嵌入代码块vue-prism-editor的实现

    这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-30

  • vue实现同时设置多个倒计时

    这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-20

  • vue Treeselect下拉树只能选择第N级元素实现代码

    这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01

  • vue开发之moment的介绍与使用

    moment是一款多语言支持的日期处理类库, 在vue中如何使用呢?这篇文章主要给大家介绍了关于vue之moment使用的相关资料,需要的朋友可以参考下...2021-05-13

  • Vue 3.0中jsx语法的使用

    这篇文章主要介绍了Vue 3.0 中 jsx 语法使用，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2020-11-13

  • Vue初始化中的选项合并之initInternalComponent详解

    这篇文章主要介绍了Vue初始化中的选项合并之initInternalComponent的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-11

  • vue项目多环境配置(.env)的实现

    最常见的多环境配置，就是开发环境配置,和生产环境配置，本文主要介绍了vue项目多环境配置的实现，感兴趣的可以了解一下...2021-07-20

  • vue:el-input输入时限制输入的类型操作

    这篇文章主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05

  • vue实现div单选多选功能

    这篇文章主要为大家详细介绍了vue实现div单选多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-07-16

  • WebStorm无法正确识别Vue3组合式API的解决方案

    这篇文章主要介绍了WebStorm无法正确识别Vue3组合式API的解决方案，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...2021-02-18

  • vue+element ui实现锚点定位

    这篇文章主要为大家详细介绍了vue+element ui实现锚点定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-06-29

  • vue 实现用户登录方式的切换功能

    这篇文章主要介绍了vue 实现用户登录方式的切换功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-04-14

  • 详解Vue Cli浏览器兼容性实践

    这篇文章主要介绍了详解Vue Cli浏览器兼容性实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-09