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代码如下

<template>
  <div id="elmloading">
    <div class="imgbox">
                <div class="img">
                </div>
        </div>
        <div class="loadfoot">
            <span class="footspan"></span>
        </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#elmloading{
        width: 50px;
        height:130px;
        position:fixed;
        top: 50%;
        left: 50%;
        margin-top: -65px;
        margin-left: -25px;
        z-index:100;
    }
    .imgbox{
        width: 50px;
        height: 50px;
        animation: myfirst 0.8s infinite;
    }
    .img{
        height: 100%;
        width: 100%;
        background: url('../../images/icon_loading.png') no-repeat;
        background-size:100%;
        animation: myf 5.6s infinite;
    }
    .loadfoot{
        height: 20px;
        position: absolute;
        bottom: 0px;
        width: 100%;
        text-align: center;
    }
    .footspan{
        display: inline-block;
        height: 10px;
        width: 20px;
        margin: 5px 0px;
        border-radius: 50%;
        animation: foot 0.8s infinite;
        background: radial-gradient(#7E7E7E, #EDEDED);
    }

    @keyframes myfirst
    {
        0% {margin-top:0px;}
        50% {margin-top:50px;}
        100% {margin-top:0px;}
    }
    @keyframes myf
    {
        0% {background-position:0% 0%;}
        14.2% {background-position:0% 0%;}
        14.2001% {background-position:0% 16%;}
        28.4% {background-position:0% 16%;}
        28.4001% {background-position:0% 33%;}
        42.6% {background-position:0% 33%;}
        42.6001% {background-position:0% 50%;}
        56.8% {background-position:0% 50%;}
        56.8001% {background-position:0% 67%;}
        71% {background-position:0% 67%;}
        71.0001% {background-position:0% 84%;}
        85.2% {background-position:0% 84%;}
        85.2001% {background-position:0% 100%;}
        100% {background-position:0% 100%;}
    }

    @keyframes foot
    {
        0% {width:20px;}
        50% {width:100%;}
        100% {width:20px;}
    }
</style>

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

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

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

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

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

<load></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是正在请求）

 <load v-if="num!=1"></load>

ok！解决！赶紧试试吧。

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