store-shop-uniapp/components/Skeleton/index.vue

<template>
  <view v-if="loading" :style="{
		width: windowWinth + 'px',
		height: windowHeight + 'px',
		backgroundColor: bgColor,
		position: 'absolute',
		left: left + 'px',
		top: top + 'px',
		zIndex: 100,
		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)<0?(item.top - top +windowHeight-80)+ 'px':(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)<0?(item.top - top +windowHeight-80)+ 'px':(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)<0?(item.top - top +windowHeight-80)+ 'px':(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;
        res[0][0].bottom = res[0][0].height
        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>

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