yshi/fuintUniapp/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>