骨架屏（vant插件）

最新推荐文章于 2025-06-06 09:27:38 发布

原创最新推荐文章于 2025-06-06 09:27:38 发布 · 1.1w 阅读

CC 4.0 BY-SA版权

博客提及index.vue和main.js，介绍了一种自动化生成骨架屏的方案，给出相关链接https://github.com/Jocs/jocs.github.io/issues/22 ，还介绍了vant插件骨架屏并提供链接https://youzan.github.io/vant/#/zh-CN/skeleton 。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示如图：
在这里插入图片描述
index.vue

<template>
  <div class="hello">

    <div v-if="isLoad">
      <van-skeleton title :row="5" style="margin-top:50px" v-for="item in 3" :key="item"/>

      <div class="loading">
        <img style="" src="../assets/loading.png" alt="">
      </div>
    </div>

    <div v-else>
      <div v-for="item in 3" :key="item" style="margin-top:40px">
        <p>Skeleton 骨架屏</p>
        <p>将loading属性设置成false表示内容加载完成，此时会隐藏占位图，并显示Skeleton的子组件段落占位图宽度，
          可传数组来设置每一行的宽度段落占位图行数头像占位图大小通过title属性显示标题占位图，通过row属性配置占位段落行数</p>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoad: true
    }
  },
  mounted() {
    // 静态数据，所以用了计时器。正式项目中不用这样做
    setTimeout(function(){
      this.isLoad = false;
    }.bind(this),3000)
  }
};
</script>

<style scoped>
  p{
    font-size: 14px;
    line-height: 28px;
    margin:0;
    padding: 0 15px;
  }
  
  .loading img{
        position: fixed;
        width:42px;
        height:42px;
        margin:-21px 0 0 -21px;
        top: 50%;
        left: 50%;
        z-index: 99;
        animation:rotate .6s infinite linear;
        -webkit-animation:rotate .6s infinite linear;
    }
    @keyframes rotate{
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
    }
    @-webkit-keyframes rotate{
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
    }
</style>

main.js

//引入vant插件
import vant from 'vant'
import 'vant/lib/index.css'

Vue.use(vant)

npm install vant -S

一种自动化生成骨架屏的方案：https://github.com/Jocs/jocs.github.io/issues/22

vant插件骨架屏：https://youzan.github.io/vant/#/zh-CN/skeleton