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，哪位老鐵有更好的方法能夠分享一下