uniapp使用loading组件

如果要在点击事件里面加loading组件的话直接this.loading=true就可以了

//loading组件
<template>
    <view v-if="loading" class="loading_container">
        <view  class="loading">
            <view class="loading_a"></view>
            <view class="loading_b"></view>
            <view class="loading_c"></view>
        </view>
    </view>
</template>

<script>
export default {
    props:{
        loading:{
            type:Boolean
        }
    }
};
</script>

<style>
.loading_container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:#fff;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes ball-beat {
    50% {
        opacity: 0.2;
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.loading {
    width: 200rpx;
    margin-top: -36rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.loading_a,
.loading_b,
.loading_c {
    width: 40rpx;
    height: 40rpx;
    margin: 10rpx;
    display: inline-block;
    -webkit-animation: ball-beat 0.7s 0s infinite linear;
    animation: ball-beat 0.7s 0s infinite linear;
    background-color: #5096fa;
    border-radius: 100%;
}
.loading_b {
    -webkit-animation-delay: -0.35s !important;
    animation-delay: -0.35s !important;
}
</style>

//主页面
<template>
    <view class="content">
        <Loading :loading='loading'></Loading>//组件使用
    </view>
</template>

<script>
    import Loading from '../loading/index.nvue'//引入loading组件
    export default {
        data() {
            return {
                loading: true,//默认值为true（开启）false为关闭
            }
        },
        onLoad() {
            console.log(this.loading);
            this.loadingTimeout()//页面第一次打开时调用loading

        },
        components: {
            Loading//组件注册
        },
        methods: {
            loadingTimeout() {
                setTimeout(() => {
                    this.loading = false;
                    console.log(this.loading);
                }, 2000);
                console.log(this.loading);
            },
    }