react ant design pro中的Spin 三步实现整个页面的loading效果

fovik-BinFriend

已于 2022-02-22 14:07:08 修改

阅读量1w

点赞数 7

分类专栏： ant design pro框架文章标签：前端框架 reactjs

于 2022-02-19 13:12:48 首次发布

本文链接：https://blog.csdn.net/weixin_52745389/article/details/123017090

版权

ant design pro框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一步：在src/layouts文件夹中找到BasicLayout.jsx文件，在文件中引入Spin标签，并使<Spin></Spin>标签包裹整个<ProLayout></ProLayout>标签，并配置Spin。

import {Spin} from 'antd'   //引入Spin组件
const BasicLayout = (props) => {
    const {dispatch,globalLoading,} = props;   

    return(
        <Spin
            spinning={globalLoading}  //是否开启加载中
            tip='Loading...'          //loading文本，这里也可以设置为动态的文本
            style={{backgroundColor:'rgba(0,0,0,0.75)',    //修改Spin原来的背景颜色
                    minHeight:'100vh',                     //使其为整个页面高度
                    position:'fixed'}}
                    //如果不觉得原来的背景颜色太浅的，则不需要设置样式
        >
            <ProLayout>内容</ProLayout>
        </Spin>
    )
}

export default connect(({ global }) => ({
	globalLoading: global.globalLoading,
}))(BasicLayout);

Spin这样就配置好了。

第二步：你需要在models中的某个文件添加一个状态，来控制loading的开与关，我这里是使用了global.js文件。

//在global.js文件中
const GlobalModel = {
    namespace:'global',
    state:{
        globalLoading:false,  //控制loading开关
    },
    reducers:{   //改变状态的值
        loadingSwitch(state,{payload}){
            return{
                ...state,
                globalLoading:payload,
            }
        }
    }
}

第三步：在你需要打开loading的页面中，开启和关闭整个页面的loading了。

//在你需要开启loading的页面中
const LoadingPage = (props) => {
    const { dispatch } = props;
    
    return(
        //页面内容
        //当请求开始时开启开关
        if (dispatch) {
           dispatch({
               type: 'global/loadingSwitch',
               payload: true,
           });
        }

        //请求结束后关闭开关
        if (dispatch) {
            dispatch({
                type: 'global/loadingSwitch',
                payload: false,
            });
        }
    )
}

这样就可以在请求数据时，有全屏的loading效果了。

效果如下：点击查询后，全屏的loading的效果。

感谢观看！欢迎在评论区提供其它的方法。