王明 / Recruitment

  <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>