123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199 |
- <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>
-
- export default {
- name: "u-skeleton",
- props: {
-
- elColor: {
- type: String,
- default: '#e5e5e5'
- },
-
- bgColor: {
- type: String,
- default: '#ffffff'
- },
-
- animation: {
- type: Boolean,
- default: false
- },
-
- borderRadius: {
- type: [String, Number],
- default: "10"
- },
-
- loading: {
- type: Boolean,
- default: true
- }
- },
- data() {
- return {
- windowWinth: 750,
- windowHeight: 1500,
- filletNodes: [],
- circleNodes: [],
- RectNodes: [],
- top: 0,
- left: 0,
- }
- },
- methods: {
-
- selecterQueryInfo() {
-
-
- let query = '';
-
- query = uni.createSelectorQuery().in(this.$parent);
-
-
- query = uni.createSelectorQuery()
-
- 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 = '';
-
-
- query = uni.createSelectorQuery().in(this.$parent);
-
-
- query = uni.createSelectorQuery()
-
- query.selectAll('.u-skeleton-rect').boundingClientRect().exec((res) => {
- this.RectNodes = res[0];
- });
- },
-
- getFilletEls() {
- let query = '';
-
-
- query = uni.createSelectorQuery().in(this.$parent);
-
-
- query = uni.createSelectorQuery()
-
- query.selectAll('.u-skeleton-fillet').boundingClientRect().exec((res) => {
- this.filletNodes = res[0];
- });
- },
-
- getCircleEls() {
- let query = '';
-
-
- query = uni.createSelectorQuery().in(this.$parent);
-
-
- query = uni.createSelectorQuery()
-
- 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>
|