react ant design pro中的Spin 三步实现整个页面的loading效果
react ant design pro中的Spin 实现整个页面的loading效果
·
第一步:在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的效果。
感谢观看!欢迎在评论区提供其它的方法。
更多推荐
已为社区贡献1条内容
所有评论(0)