uview-ui/components/u-skeleton/u-skeleton.vue

<template>
	<view v-if="loading" :style="{
		width: windowWinth + 'px', 
		height: windowHeight + 'px', 
		backgroundColor: bgColor, 
		position: 'absolute', 
		left: left + 'px', 
		top: top + 'px', 
		zIndex: 9998, 
		overflow: 'hidden'
	}"
	 @touchmove.stop.prevent>
		<view v-for="(item, index) in RectNodes" :key="$u.guid()" :class="[animation ? 'skeleton-fade' : '']" :style="{
			width: item.width + 'px', 
			height: item.height + 'px', 
			backgroundColor: elColor, 
			position: 'absolute', 
			left: (item.left - left) + 'px', 
			top: (item.top - top) + 'px'
		}"></view>
		<view v-for="(item, index) in circleNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
			width: item.width + 'px', 
			height: item.height + 'px', 
			backgroundColor: elColor, 
			borderRadius: item.width/2 + 'px', 
			position: 'absolute', 
			left: (item.left - left) + 'px',
			top: (item.top - top) + 'px'
		}"></view>
		<view v-for="(item, index) in filletNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
			width: item.width + 'px', 
			height: item.height + 'px', 
			backgroundColor: elColor, 
			borderRadius: borderRadius + 'rpx', 
			position: 'absolute', 
			left: (item.left - left) + 'px',
			top: (item.top - top) + 'px'
		}"></view>
	</view>
</template>

<script>
	/**
	 * skeleton 骨架屏
	 * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
	 * @tutorial https://www.uviewui.com/components/skeleton.html
	 * @property {String} el-color 骨架块状元素的背景颜色（默认#e5e5e5）
	 * @property {String} bg-color 骨架组件背景颜色（默认#ffffff）
	 * @property {Boolean} animation 骨架块是否显示动画效果（默认false）
	 * @property {String Number} border-radius u-skeleton-fillet类名元素，对应的骨架块的圆角大小，单位rpx（默认10）
	 * @property {Boolean} loading 是否显示骨架组件，请求完成后，将此值设置为false（默认true）
	 * @example <u-skeleton :loading="true" :animation="true"></u-skeleton>
	 */
	export default {
		name: "u-skeleton",
		props: {
			// 需要渲染的元素背景颜色，十六进制或者rgb等都可以
			elColor: {
				type: String,
				default: '#e5e5e5'
			},
			// 整个骨架屏页面的背景颜色
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			// 是否显示加载动画
			animation: {
				type: Boolean,
				default: false
			},
			// 圆角值，只对类名为u-skeleton-fillet的元素生效，为数值，不带单位
			borderRadius: {
				type: [String, Number],
				default: "10"
			},
			// 是否显示骨架，true-显示，false-隐藏
			loading: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				windowWinth: 750, // 骨架屏宽度
				windowHeight: 1500, // 骨架屏高度
				filletNodes: [], // 圆角元素
				circleNodes: [], // 圆形元素
				RectNodes: [], // 矩形元素
				top: 0,
				left: 0,
			}
		},
		methods: {
			// 查询各节点的信息
			selecterQueryInfo() {
				// 获取整个父组件容器的高度，当做骨架屏的高度 
				// 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
				let query = '';
				// #ifdef MP-WEIXIN
				query = uni.createSelectorQuery().in(this.$parent);
				// #endif
				// #ifndef MP-WEIXIN
				query = uni.createSelectorQuery()
				// #endif
				query.selectAll('.u-skeleton').boundingClientRect().exec((res) => {
					this.windowHeight = res[0][0].height;
					this.windowWinth = res[0][0].width;
					this.top = res[0][0].bottom - res[0][0].height;
					this.left = res[0][0].left;
				});
				// 矩形骨架元素
				this.getRectEls();
				// 圆形骨架元素
				this.getCircleEls();
				// 圆角骨架元素
				this.getFilletEls();
			},
			// 矩形元素列表
			getRectEls() {
				let query = '';
				// 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
				// #ifdef MP-WEIXIN
				query = uni.createSelectorQuery().in(this.$parent);
				// #endif
				// #ifndef MP-WEIXIN
				query = uni.createSelectorQuery()
				// #endif
				query.selectAll('.u-skeleton-rect').boundingClientRect().exec((res) => {
					this.RectNodes = res[0];
				});
			},
			// 圆角元素列表
			getFilletEls() {
				let query = '';
				// 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
				// #ifdef MP-WEIXIN
				query = uni.createSelectorQuery().in(this.$parent);
				// #endif
				// #ifndef MP-WEIXIN
				query = uni.createSelectorQuery()
				// #endif
				query.selectAll('.u-skeleton-fillet').boundingClientRect().exec((res) => {
					this.filletNodes = res[0];
				});
			},
			// 圆形元素列表
			getCircleEls() {
				let query = '';
				// 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
				// #ifdef MP-WEIXIN
				query = uni.createSelectorQuery().in(this.$parent);
				// #endif
				// #ifndef MP-WEIXIN
				query = uni.createSelectorQuery()
				// #endif
				query.selectAll('.u-skeleton-circle').boundingClientRect().exec((res) => {
					this.circleNodes = res[0];
				});
			}
		},
		// 组件被挂载
		mounted() {
			// 获取系统信息
			let systemInfo = uni.getSystemInfoSync();
			this.windowHeight = systemInfo.windowHeight;
			this.windowWinth = systemInfo.windowWidth;
			this.selecterQueryInfo();
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";
	
	.skeleton-fade {
		width: 100%;
		height: 100%;
		background: rgb(194, 207, 214);
		animation-duration: 1.5s;
		animation-name: blink;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}

	@keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.4;
		}

		100% {
			opacity: 1;
		}
	}
</style>