vue从创建到完整的饿了么（13）饿了么loading图及多个请求时显示与隐藏

说明

1.上一章--miste.vue
2.苍渡大神源码地址--项目源码地址
3.UI框架--Mint UI
4.下一章--shop.vue

开始

1.先看饿了么的loading素材图

2.在src下新建文件夹 images ,用来放图片。将上面的素材图放入其中。

3.在src下的components下新建load文件夹，在load文件夹下新建load.vue文件

4.load.vue代码如下

不会用svg，用css动画来写。这是最low的写法。缺点很多，但咱这个项目可以凑或用。

5.引用。
在msite.vue页面引用。

import load from '../../components/load/load'

components:{
  //注册组件
    load
  },

使用时直接当做便签使用即可

6.这样的话，loading图会一直显示，现在来控制显示隐藏
loading应该在数据请求时显示，请求结束后隐藏。
如果只有一个请求的话就很好判断，但是如果有多个请求呢？怎么判断所有的请求都结束了？
在data中创建一个变量num=1

 data () {
    return {
      num:1    //ajax是否加载完成
    }
  },

每次发送请求时，num就减一，请求结束时（不管成功还是失败）num就+1，这样直接判断num是否等于1（这个1是设定的num初始值，可以是任何数），就可以知道请求是否结束（有点类似能量守恒定律），如下一个请求

//定位信息
 this.num=this.num-1     this.$http.get('http://cangdu.org:8001/v2/pois/'+this.$store.state.latitude+','+this.$store.state.longitude+'').then(response => {
        console.log(response);
        this.cityname=response.body;
        this.num=this.num+1;
      }, response => {
        console.log(response);
         this.num=this.num+1;
      });

load标签加上if判断即可（num==1是请求结束，num！=1是正在请求）

ok！解决！赶紧试试吧。

不过这样写的缺点是，每个页面都要创建num，哪位老铁有更好的方法可以分享一下