crmeb_shop/template/uni-app/pages/index/components/skeleton.vue

<template>
	<view v-if="show"
		:style="{width: systemInfo.width * 2 + 'rpx', height: systemInfo.height * 2 + 'rpx', backgroundColor: bgcolor, position: 'absolute', left: 0, top: 0, zIndex: 9998}">
		<view v-for="(item,rect_idx) in skeletonRectLists" :key="rect_idx + 'rect'"
			:class="[loading == 'chiaroscuro' ? 'chiaroscuro' : '']"
			:style="{width: item.width * 2 + 'rpx', height: item.height * 2 + 'rpx', backgroundColor: 'rgb(194, 207, 214,.3)', position: 'absolute', left: item.left * 2 + 'rpx', top: item.top * 2 + 'rpx'}">
		</view>
		<view v-for="(item,circle_idx) in skeletonCircleLists" :key="circle_idx + 'circle'"
			:class="loading == 'chiaroscuro' ? 'chiaroscuro' : ''"
			:style="{width: item.width * 2 + 'rpx', height: item.height * 2 + 'rpx', backgroundColor: 'rgb(194, 207, 214,.3)', borderRadius: item.width * 2 + 'rpx', position: 'absolute', left: item.left * 2 + 'rpx', top: item.top * 2 + 'rpx'}">
		</view>
		<view class="spinbox" v-if="loading == 'spin'">
			<view class="spin"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "skeleton",
		props: {
			bgcolor: {
				type: String,
				value: '#FFF'
			},
			selector: {
				type: String,
				value: 'skeleton'
			},
			loading: {
				type: String,
				value: 'chiaroscuro'
			},
			show: {
				type: Boolean,
				value: false
			},
			isNodes: {
				type: Number,
				value: false
			} //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
		},
		data() {
			return {
				loadingAni: ['spin', 'chiaroscuro'],
				systemInfo: {},
				skeletonRectLists: [{
					bottom: 35,
					dataset: {},
					height: 25,
					id: "",
					left: 15,
					right: 65,
					top: 10,
					width: 50,
				}, {
					bottom: 72,
					dataset: {},
					height: 30,
					id: "",
					left: 15,
					right: 360,
					top: 42,
					width: 345,
				}, {
					bottom: 232,
					dataset: {},
					height: 145,
					id: "",
					left: 15,
					right: 360,
					top: 87,
					width: 345,
				}, {
					bottom: 436,
					dataset: {},
					height: 30,
					id: "",
					left: 15,
					right: 360,
					top: 406,
					width: 345,
				}, {
					bottom: 596,
					dataset: {},
					height: 150,
					id: "",
					left: 15,
					right: 183,
					top: 446,
					width: 168,
				}, {
					bottom: 519,
					dataset: {},
					height: 73,
					id: "",
					left: 188,
					right: 360,
					top: 446,
					width: 172,
				}, {
					bottom: 596,
					dataset: {},
					height: 73,
					id: "",
					left: 188,
					right: 360,
					top: 523,
					width: 172,
				}, {
					bottom: 793,
					dataset: {},
					height: 177,
					id: "",
					left: 15,
					right: 360,
					top: 616,
					width: 345,
				}, {
					bottom: 1680,
					dataset: {},
					height: 206,
					id: "",
					left: 15,
					right: 360,
					top: 1474,
					width: 345,
				}],
				skeletonCircleLists: [{
						"id": "",
						"dataset": {},
						"left": 27,
						"right": 72,
						"top": 245,
						"bottom": 270,
						"width": 45,
						"height": 45
					},
					{
						"id": "",
						"dataset": {},
						"left": 96,
						"right": 141,
						"top": 245,
						"bottom": 270,
						"width": 45,
						"height": 45
					},
					{
						"id": "",
						"dataset": {},
						"left": 165,
						"right": 210,
						"top": 245,
						"bottom": 270,
						"width": 45,
						"height": 45
					},
					{
						"id": "",
						"dataset": {},
						"left": 234,
						"right": 279,
						"top": 245,
						"bottom": 270,
						"width": 45,
						"height": 45
					},
					{
						"id": "",
						"dataset": {},
						"left": 303,
						"right": 348,
						"top": 245,
						"bottom": 270,
						"width": 45,
						"height": 45
					},
					{
						"id": "",
						"dataset": {},
						"left": 27,
						"right": 72,
						"top": 327,
						"bottom": 352,
						"width": 45,
						"height": 45
					},
					{
						"id": "",
						"dataset": {},
						"left": 96,
						"right": 141,
						"top": 327,
						"bottom": 352,
						"width": 45,
						"height": 45
					},
					{
						"id": "",
						"dataset": {},
						"left": 165,
						"right": 210,
						"top": 327,
						"bottom": 352,
						"width": 45,
						"height": 45
					},
					{
						"id": "",
						"dataset": {},
						"left": 234,
						"right": 279,
						"top": 327,
						"bottom": 352,
						"width": 45,
						"height": 45
					},
					{
						"id": "",
						"dataset": {},
						"left": 303,
						"right": 348,
						"top": 327,
						"bottom": 352,
						"width": 45,
						"height": 45
					}
				]
			}
		},
		watch: {
			isNodes(val) {
				// this.readyAction();
			}
		},
		mounted() {
			this.attachedAction();
		},
		methods: {
			attachedAction: function() {
				//默认的首屏宽高，防止内容闪现
				const systemInfo = uni.getSystemInfoSync();
				this.systemInfo = {
					width: systemInfo.windowWidth,
					height: systemInfo.windowHeight
				};
				this.loading = this.loadingAni.includes(this.loading) ? this.loading : 'spin';
			}
		}
	}
</script>

<style>
	.spinbox {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		z-index: 9999
	}

	.spin {
		display: inline-block;
		width: 64rpx;
		height: 64rpx;
	}

	.spin:after {
		content: " ";
		display: block;
		width: 46rpx;
		height: 46rpx;
		margin: 1rpx;
		border-radius: 50%;
		border: 5rpx solid #409eff;
		border-color: #409eff transparent #409eff transparent;
		animation: spin 1.2s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.chiaroscuro {
		width: 100%;
		height: 100%;
		background: rgb(194, 207, 214);
		animation-duration: 2s;
		animation-name: blink;
		animation-iteration-count: infinite;
	}

	@keyframes blink {
		0% {
			opacity: .4;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: .4;
		}
	}

	@keyframes flush {
		0% {
			left: -100%;
		}

		50% {
			left: 0;
		}

		100% {
			left: 100%;
		}
	}

	.shine {
		animation: flush 2s linear infinite;
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		background: linear-gradient(to left,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, .85) 50%,
				rgba(255, 255, 255, 0) 100%)
	}
</style>