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为啥可以滑动，是因为自己项目问题）。

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