1、预期需要实现效果:
众所周知,第一次打开SPA应用的时候,如果你的项目够大,那么首次加载资源时,会非常的久。由于资源没有加载完毕,界面的DOM也不会渲染,会造成白屏的问题。用户此时并不知道是加载的问题,所以会带来一个不好的体验。因此通常会在public下写一个加载动画,告诉用户,网页在加载中这个提示。当页面加载成功后,页面渲染出来的这一个体验比白屏等开机要好太多了。
2、
在我们渲染表格数据的时候,当表格数据改变的时候我们出现加载效果。非使用Spin
组件。当接口在调用的时候,我们去控制loading
效果。所以我们在models实现。
使用到的是Table中的loading属性。
2、直接贴出代码
loading: true, =>state
====>effects
// 查询班级出勤统计数据单天
*inqui..........({ payload }, { call, put }) {
yield put({
type: 'changeLoading',
payload: true,
});
const response = yield call(inqui......, payload);
yield put({
type: 'getAllSingle',
payload: {
allClassSingleList: response.datas,
},
});
yield put({
type: 'changeLoading',
payload: false,
});
},
====>reducers
changeLoading(state, action) {
return {
...state,
loading: action.payload,
};
},
在上面的代码中,在接口调用之前将初始值置为true, 当接口调用完全之后再置为false。
3、页面使用不再讲述。