uniapp骨架屏显示

1、新建skeleton.vue文件

<template>
  <div>
    <div class="wrap"
         :style="{'width':systemInfo.width+'px','height':systemInfo.height+'px', 'background-color':bgcolor}">
      <div v-for="(item,index) in skeletonRectLists"
           :index='index'
           :key='index'
           class="chiaroscuro"
           :style="{'width':item.width+'px','height':item.height+'px','background-color':'rgba(233, 2, 233,1)','position':'absolute','left':item.left+'px','top':item.top+'px'}">
      </div>
      <div v-for="(item,index) in skeletonCircleLists"
           :index='index'
           :key="'info2-'+index"
           class="chiaroscuro"
           :style="{'width':item.width+'px','height':item.height+'px','background-color':'rgba(233, , 233,1)','border-radius':item.width+'px','position':'absolute','left':item.left+'px','top':item.top+'px'}">
      </div>
    </div>
  </div>
</template>

<script>
		/* eslint-disable */
		export default {
		  props: {
		    bgcolor: { type: String, value: '#FFF' },
		    selector: { type: String, value: 'skeleton' },
		  },
		
		  data() {
		    return {
		      systemInfo: {},
		      skeletonRectLists: [],
		      skeletonCircleLists: [],
		    };
		  },
		
		  components: {},
		
		  methods: {
		    rectHandle: function() {
		      const that = this;
		      //绘制不带样式的节点
		      uni
		        .createSelectorQuery()
		        .selectAll(`.${this.selector}-rect`)
		        .boundingClientRect()
		        .exec(function(res) {
		          that.skeletonRectLists = res[0];
		        });
		    },
		
		    radiusHandle: function() {
		      const that = this;
		      uni
		        .createSelectorQuery()
		        .selectAll(`.${this.selector}-radius`)
		        .boundingClientRect()
		        .exec(function(res) {
		            console.log(res[0].length);
		          that.skeletonCircleLists = res[0];
		        });
		    },
		  },
		
		  mounted: function() {
		    //默认的首屏宽高，防止内容闪现
		    const systemInfo = uni.getSystemInfoSync();
		    (this.systemInfo = {
		      width: systemInfo.windowWidth,
		      height: systemInfo.windowHeight,
		    });
		    const that = this;
		    //绘制背景
		    uni
		      .createSelectorQuery()
		      .selectAll(`.${this.selector}`)
		      .boundingClientRect()
		      .exec(function(res) {
		        that.systemInfo.height = res[0][0].height + res[0][0].top || 0;
		      });
		
		    //绘制矩形
		    this.rectHandle();
		
		    //绘制圆形
		    this.radiusHandle();
		  },
		};
		/* eslint-enable */
</script>

<style scoped>
		.wrap {
		  position: absolute;
		  left: 0;
		  top: 0;
		  z-index: 9998;
		  overflow: hidden;
		}
		.chiaroscuro {
		  animation-duration: 1s;
		  animation-fill-mode: forwards;
		  animation-iteration-count: infinite;
		  animation-name: placeHolderShimmer;
		  animation-timing-function: linear;
		  background: #f6f7f8;
		  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
		  background-size: 800px 104px;
		  height: 40px;
		  position: relative;
		}
		@keyframes placeHolderShimmer{
		  0% {
		    background-position: -468px 0
		  }
		  100% {
		    background-position: 468px 0
		  }
		}
</style>

2、使用

<template>
    <view class="content ">
        <skeleton selector="skeleton" bgcolor="#FFF" v-if="showSkeleton"></skeleton>
        <view class="skeleton">
            <image class="logo skeleton-rect" src="/static/logo.png"></image>
            <view class="text-area skeleton-radius">
                <text class="title">{{title}}</text>
            </view>
        </view>
        
    </view>
</template>

<script>
import skeleton from '../index/skeleton'
export default {
    data() {
        return {
            showSkeleton:true,
            title: 'Hello',
        }
    },
    components:{
        'skeleton':skeleton
    },
    created() {
        this.reloadData();
    },
    methods:{
        reloadData() {
            setTimeout(() => {
                this.showSkeleton = false
            },2000)
        },
    }
}
</script>


<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>