上传加载loading

版权声明： https://blog.csdn.net/Helloyongwei/article/details/81627721

在上传歌曲的时候, 我们发现屏幕上只有左下角有个文字提示: 文件正在上传, 文件上传成功. 这对于用户来说, 看不看得见是一个问题, 更重要的是影响用户体验, 用户还不一定知道是否上传了呢. 因此我们需要做一件事情. 那就是在上传歌曲的时候, 加载一个loading动画, 让用户理解正在上传.

基本结构

loading的基本结构为

<style>
    @keyframes loading{
        0% {
            transform: scale(1.0);
        }
        100% {
            transform: scale(0.1);
        }
    }
    .site-loading{
        visibility: hidden;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: rgba(0, 0, 0, 0.2);
        pointer-events: none;
    }
    .site-loading.active {
        visibility: visible;
    }
    .site-loading::before{
        content:'';
        display: block;
        border-radius: 50%;
        background: #ccc;
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
        animation: loading 2s infinite alternate-reverse linear;
    }
</style>
<div id="siteLoading" class="site-loading"></div>

开始的时候我们让这个loading看不见, 即visibility: hidden;. 当上传时, 我们给div一个active类. 让动画出现. 上传完成后再将active去除, 消失动画.

创建loading.js

为了达到这个效果, 还需要一个loading.js文件. 这个loading文件用于注册动画的show和hide动作.

window.eventHub.on('beforeUpload', ()=>{
 this.view.show()
})
window.eventHub.on('afterUpload', ()=>{
  this.view.hide()
})

beforeUpload用于添加active类, 此时动画加载.
afterUpload用于删除active类, 此时动画隐藏.

如何触发呢? 当然是在upload-song.js文件中. 这个文件是处理文件上传相关事宜的.

'BeforeUpload': function(up, file) {
    // 每个文件上传前，处理相关的事情
    window.eventHub.emit('beforeUpload')
}

'FileUploaded': function(up, file, info) {
    window.eventHub.emit('afterUpload')
}

最后别忘了将这个文件引入到admin.html中去,
这样我们在上传文件的时候就可以了加载动画了.