React实现全局Loading

2023-12-18 17:24:38

css

#__loading {
  position:fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
}

页面代码

使用了antd的Spin组件


import React from 'react'
import ReactDOM from 'react-dom'
import { Spin } from 'antd'

class Loading {
    show (timeout) {
        const config = {
            tip: 'Loading...',
        }
        if (timeout) {
            window.setTimeout(() => {
                document.body.removeChild(document.getElementById('__loading'))
            }, timeout)
        }
        const dom = document.createElement('div')
        dom.setAttribute('id', '__loading')
        document.body.appendChild(dom)
        ReactDOM.render(<Spin {...config} />, dom)
    }
    hide() {
        document.body.removeChild(document.getElementById('__loading'))
    }
}

export default new Loading()

其实是没有必要使用antd的Spin组件,自己通过css实现一个Loading效果,网上百度一堆这种代码,我这里使用antd的组件是因为我自己项目使用了antd,保证组件风格统一性。

注意点

刚开始我使用的css样式是position:absolute; 然后我发现我的Loading一会在页面中间,一会不在顶部。

通过查看css发现,自己的页面的body是可以滑动的,导致Loading位置时不时变化,如果页面不滑动Loading在页面中间,如果滑动就不在了。所以应该把css样式修改成position:fixed;就没问题了。(至于为啥自己页面body为啥可以滑动,是因为自己项目问题)。

推广一下自己开发的微信小程序,有兴趣的朋友可以玩一玩

文章来源:https://blog.csdn.net/qq_33715850/article/details/135064500
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。