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