DVA框架统一处理所有页面的loading状态

// 2. Plugins
app.use(createLoading());

每个页面中将loading状态作为属性传入组件，在进行样式处理，比如转圈圈或者显示正在加载什么的，但是重点是，我们的app有多个页面，每个页面都这么做，很繁琐。

如何只做一次状态处理，每次请求期间都会触发loading状态呢，其实也很简单啦，因为dva-loading提供了一个global属性。

1、state中的loading对象

loading对象中的global属性表示的全局loading状态，models里是每个model的loading状态

所以我们根据state.loading.global指示全局loading状态。

2、一个父级组件

我们要向所有页面应用这个loading状态，那么我们可以在每个页面中使用一个父级组件来处理这个loading。上代码：

import React from 'react';
import styles from './app.css';
import { connect } from 'dva';
import { ActivityIndicator } from 'antd-mobile';
const TIMER = 800;
let timeoutId = null;
class App extends React.Component {
 state = {
  show: false
 }
 componentWillMount() {
  const { loading } = this.props;
  if (loading) {
   timeoutId = setTimeout(() => {
    this.setState({
     show: true
    });
   }, TIMER);
  }
 }
 componentWillReceiveProps(nextProps) {
  const { loading } = nextProps;
  const { show } = this.state;
  this.setState({
   show: false
  });
  if (loading) {
   timeoutId = setTimeout(() => {
    this.setState({
     show: true
    });
   }, TIMER);
  }
 }
 componentWillUnmount() {
  if (timeoutId) {
   clearTimeout(timeoutId);
  }
 }
 render() {
  const { loading } = this.props;
  const { show } = this.state;
  return (
   <p className={this.props.className}>
    { this.props.children }
    <p className={styles.loading}>
     <ActivityIndicator toast text="正在加载" animating={show && loading} />
    </p>
   </p>
  );
 }
}
const mapStateToProps = (state, ownProps) => {
 return {
  loading: state.loading.global && !state.loading.models.Verify
 }
};
export default connect(mapStateToProps)(App);
说明：
1、<ActivityIndicator />是ant-design mobile的一个loading指示组件，animating属性指示显示与否，我们使用show和loading两个属性来控制显示与否。
2、为什么要show和loading两个参数，有个loading不就可以了吗？show的存在是为了实现一个需求：loading在请求发生的TIMER时间后出现，如果请求很快，小于TIMER时间，那么就不显示loading。如果没有这个需求，这个组件中可以只保留render()方法。
3、&& !state.loading.models.Verify这个是做什么的？这个的作用是排除Verify这个model对loading的影响，比如我不想在这个model对应的页面出现loading，可以在这里处理。
3、在router.js中使用这个父级组件
有了这个父级组件，那么在每个页面中加入这个父级组件，就可以实现loading，当然这个是可以在router.js中统一处理一下的。
比如：
 <Router history={history}>
   <Route path="/admin" component={App}>
    <IndexRoute component={AdminIndex} />
    <Route path="movie_add" component={MovieAdd} />
    <Route path="movie_list" component={MovieList} />
    <Route path="category_add" component={CategoryAdd} />
    <Route path="category_list" component={CategoryList} />
    <Route path="user_add" component={UserAdd} />
    <Route path="user_list" component={UserList} />
   </Route>
  </Router>
这样，在进入/admin下的每个页面，都会加载App作为父组件。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
小程序实现九宫格界面的导航
微信小程序之绑定点击事件的解析
关于微信小程序中弹框和模态框的实现
以上就是DVA框架统一处理所有页面的loading状态的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。



  
关键词：DVA框架统一处理所有页面的loading状态