app内嵌h5简单loading组件实现

 由于之前在使用mint-ui时，loading无法使用，最后没有办法只能自己写一个简单loading组件进行使用，代码如下：

<template>
<div id="mark-bg">
    <div class="container">
        <div class="loading-bg">
            <img class="loading-icon" src="../assets/images/loading3.gif" alt="">
            <span class="loading-tip">加载中</span>
        </div>
    </div>
</div>
</template>
<script>
export default {
    name: 'apploading',
    data () {
        return {

        }
    }
}
</script>

<style>
   #mark-bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 1000;
    }

    .container {
        width: 30vw;
        height: 30vw;
        z-index: 1000;
        display: inline-block;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        background:#000;
        border-radius: 5vw;
        opacity: 0.6;
        transform: translate(-50%, -50%);
    }
    .loading-bg{
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .loading-icon {
        width: 10vw;
        height: 10vw;
        display:inline-block;
        margin-top: -8vw; 
    }
    .loading-tip {
        display: inline-block;
        font-size: 4vw;
        color: #fff;
        position: absolute;
        bottom: 5vw;
       
    }
</style>

在使用过程中可能会发现在遮罩层出现的同时后面的页面还能继续滑动，如果有相应的解决办法，可以自行添加。

转载于:https://www.cnblogs.com/longflag/p/11395242.html