封装加载动画组件，利用slot标签与vuex实现

 

实现效果： 

加载时：

 

 

加载完成时；

 

 

 

实现代码：

通过vuex传入一个布尔值loading控制加载动画显示与否，动画关闭时，通过slot标签显示本组件中包含的其他内容

组件代码：

<template>
    <view>
        <view class="loading-21 spinner" v-if="loading">
            <view></view>
            <view></view>
            <view></view>
            <view></view>
            <view></view>
            <view></view>
        </view>
        <view style="height: 100%;" v-else>
            <slot></slot>
        </view>
    </view>
</template>

<script>
    import {
        // mapState
    } from 'vuex'
    export default {
        data() {
            return {
                loading: false
            }
        },
        computed: {
            // ...mapState(['loading'])
        },
        methods: {},
        mounted() {}
    }
</script>

<style scoped>
    .spinner {
        margin: 100px auto;
        /* width: 50px; */
        /* height: 60px; */
        text-align: center;
        position: relative;
    }

    .loading-21 view {
        width: 40upx;
        height: 40upx;
        border-radius: 20upx;
        backface-visibility: hidden;
        position: absolute;
        animation-name: move;
        animation-timing-function: cubic-bezier(0.4, 0, 1, 0.8);
        animation-iteration-count: infinite;
        animation-duration: 3s;
        top: calc(50% - 20upx);
        left: 50%;
        transform-origin: -20upx center;
    }

    .loading-21 view:nth-child(1) {
        background: #d24e51;
        animation-delay: -0.5s;
        opacity: 0;
    }

    .loading-21 view:nth-child(2) {
        background: #d24e51;
        animation-delay: -1s;
        opacity: 0;
    }

    .loading-21 view:nth-child(3) {
        background: #d24e51;
        animation-delay: -1.5s;
        opacity: 0;
    }

    .loading-21 view:nth-child(4) {
        background: #d24e51;
        animation-delay: -2s;
        opacity: 0;
    }

    .loading-21 view:nth-child(5) {
        background: #d24e51;
        animation-delay: -2.5s;
        opacity: 0;
    }

    .loading-21 view:nth-child(6) {
        background: #d24e51;
        animation-delay: -3s;
        opacity: 0;
    }

    @keyframes move {
        0% {
            transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);
        }

        30% {
            opacity: 1;
        }

        100% {
            z-index: 10;
            transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);
        }
    }
</style>

 

调用时：

<template>
    <view class="content">
        <requset-loading>
            <view class="">
                <text>text</text>
            </view>
        </requset-loading>
    </view>
</template>