Vue3项目中的骨架屏

实现场景:刚进入页面的时候,需要后端接口回传的数据,还没有回来,为了客户有更好的体验,需要设置骨架屏,效果图如下:

 实现步骤:

1.设置通用组件骨架屏(可以设置的属性:高，宽，背景颜色，是否有闪动画)

基本传值如下图:

2.设置业务组件骨架屏

1).设置通用组件骨架屏基本构建

 src/components/library/Skeleton.vue

<template> <div class="skeleton" :style="{width,height}" :class="{shan:animated}"> <!-- 1 盒子--> <div class="block" :style="{backgroundColor:bg}"></div>  //一个盒子包含了另一个盒子,样式写在                                                                                                                              // 一个div中也是可以的 <!-- 2 闪效果 xtx-skeleton 伪元素 ---> </div> </template> <script> export default { name: 'Skeleton', // 使用的时候需要动态设置 高度，宽度，背景颜色，是否闪下 props: { bg: { type: String, default: '#efefef' }, width: { type: String, default: '100px' }, height: { type: String, default: '100px' }, animated: { type: Boolean, default: false } } } </script> <style scoped lang="less"> .skeleton { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; .block { width: 100%; height: 100%; border-radius: 2px; } } .shan { &::after { content: ""; position: absolute; animation: shan 1.5s ease 0s infinite; top: 0; width: 50%; height: 100%; background: linear-gradient( to left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-45deg); } } @keyframes shan { 0% { left: -100%; } 100% { left: 120%; } } </style>

 全局注册(main.js中记得导入这个文件,并用Vue中use注册)

src/componets/library/index.j

import Skeleton from './Skeleton.vue'  export default { install (app) {  app.component(Skeleton.name, XtxSkeleton) } }

实现第一个图

 src/views/home/components/home-cate.vue

<ul class="menu"> <li :class="{active:categoryId===item.id}" v-for="item in list" :key="item.id" @mouseenter="categoryId=item.id"> <RouterLink to="/">{{item.name}}</RouterLink> <template v-if="item.children"> <RouterLink to="/" v-for="sub in item.children" :key="sub.id">{{sub.name}}</RouterLink> </template>  <span v-else>  <Skeleton width="60px" height="18px" style="margin-right:5px" bg="rgba(255,255,255,0.2)" />  <Skeleton width="50px" height="18px" bg="rgba(255,255,255,0.2)" />  </span> </li> </ul>

封装业务组件src/views/home/components/home-skeleton.vue,实现第二图的效果

<template> <div class='home-skeleton'> <div class="item" v-for="i in 4" :key="i" :style="{backgroundColor:bg}"> <Skeleton bg="#e4e4e4" width="306px" height="306px" animated /> <Skeleton bg="#e4e4e4" width="160px" height="24px" animated /> <Skeleton bg="#e4e4e4" width="120px" height="24px" animated /> </div> </div> </template>  <script> export default { name: 'HomeSkeleton', props: { bg: { type: String, default: '#fff' } } } </script>  <style scoped lang='less'> .home-skeleton { width: 1240px; height: 406px; display: flex; justify-content: space-between; .item { width: 306px; .xtx-skeleton ~ .xtx-skeleton{ display: block; margin: 16px auto 0; } } } </style>

在需要用的组件中,导入业务组件使用

<HomePanel title="人气推荐" sub-title="人气爆款 不容错过">  <Transition name="fade">  // 配合了vue中的淡入淡出的动画  <ul v-if="goods.length" ref="pannel" class="goods-list">  // v-if有数据显示数据 <li v-for="item in goods" :key="item.id"> <RouterLink to="/"> <img :src="item.picture" alt=""> <p class="name">{{item.title}}</p> <p class="desc">{{item.alt}}</p> </RouterLink> </li> </ul>  <HomeSkeleton v-else />   // 没有数据就显示骨架  </Transition>  </div> </HomePanel>