美文网首页【uniapp】
uniapp | 加载中loading

uniapp | 加载中loading

作者: __书山有路__ | 来源:发表于2020-07-14 16:18 被阅读0次
<deng-loading :status="loadingStatus"></deng-loading>

loadingStatus:true,

              //    增加loading
            setTimeout(() => {
               this.loadingStatus = false
            }, 1500)

<template>
    <view class="dengLoadingVue">
        <view class="maskVueHiddenShow" v-if="status" @click="onCheckHiddenApi">
            <view class="maskVueHiddenShowWrapper">
                <image src="https://image.weilanwl.com/gif/rhomb-white.gif" class="maskVueHiddenShowWrapperGif"></image>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            status:false,
        },
        data() {
            return {
                
            };
        }
    }
</script>

<style lang="scss">
    .dengLoadingVue {
        .maskVueHiddenShow {
            z-index: 101;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            background-color: #fff;
            // opacity: 0.8;
            //
            display: flex;
            align-items: center;
            justify-content: center;
            .maskVueHiddenShowWrapper {
                width: 80%;
                height: 300rpx;
                // background-color: red;
                display: flex;
                align-items: center;
                justify-content: center;
                .maskVueHiddenShowWrapperGif {
                    width: 400rpx;
                    height: 300rpx;
                    // background-color: red;
                }
            }
        }
    }
</style>

相关文章

网友评论

    本文标题:uniapp | 加载中loading

    本文链接:https://www.haomeiwen.com/subject/dirfhktx.html