因为有很多组件需要loading,所以我们把loading写为组件，在全局中都可以使用
而选择的loading ,最好是css3动画写的，如果用图片，图片本身就是需要请求的
在网上找了一个css3动画，如下：

loading中的代码：

<template>
  <div class="loader"></div>
</template>
<script>
export default {};
</script>
<style scoped>
.loader {
  position: relative;
  width: 2.5em;
  height: 2.5em;
  transform: rotate(165deg);
}
.loader:before,
.loader:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 0.25em;
  transform: translate(-50%, -50%);
}
.loader:before {
  animation: before 2s infinite;
}
.loader:after {
  animation: after 2s infinite;
}

@keyframes before {
  0% {
    width: 0.5em;
    box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75),
      -1em 0.5em rgba(111, 202, 220, 0.75);
  }
  35% {
    width: 2.5em;
    box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75),
      0 0.5em rgba(111, 202, 220, 0.75);
  }
  70% {
    width: 0.5em;
    box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75),
      1em 0.5em rgba(111, 202, 220, 0.75);
  }
  100% {
    box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75),
      -1em 0.5em rgba(111, 202, 220, 0.75);
  }
}
@keyframes after {
  0% {
    height: 0.5em;
    box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75),
      -0.5em -1em rgba(233, 169, 32, 0.75);
  }
  35% {
    height: 2.5em;
    box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75),
      -0.5em 0 rgba(233, 169, 32, 0.75);
  }
  70% {
    height: 0.5em;
    box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75),
      -0.5em 1em rgba(233, 169, 32, 0.75);
  }
  100% {
    box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75),
      -0.5em -1em rgba(233, 169, 32, 0.75);
  }
}
/**
 * Attempt to center the whole thing!
 */
html,
body {
  height: 100%;
}

.loader {
  position: absolute;
  top: calc(50% - 1.25em);
  left: calc(50% - 1.25em);
}
</style>

然后main.js 中的代码：

import Loading from "./components/Loading/loading"
Vue.component("Loading", Loading) //第一个参数是自定义元素名称，也就是将来在别的组件中使用这个组件的标签名称。第二个参数是将要注册的Vue组件。

然后再其他组件中用，需要引入loading组件，如下:

<Loading v-if="isLoading"></Loading>

在这里需要注意，我们在请求数据之前用到loading,数据求成功后，需要把loading隐藏，此处我们就用指令v-if控制，如下：

<template>
  <div class="Coming">
    <Loading v-if="isLoading"></Loading>
    <ul v-else> 
      <li class="Coming-li" v-for="(item,index) in movieList" :key="index" @click="handDetail(item.id)">
        <div class="Coming-img">
          <img :src="item.img | setwh('120.180')" alt />
        </div>
        <div class="Coming-content">
          <h3>{{item.nm}}</h3>
          <span>观众评分</span>
          <span class="score">{{item.sc}}</span>
          <p>主演：{{item.star}}</p>
          <p>{{item.showInfo}}</p>
        </div>
        <div class="Coming-buy">
          <span>购票</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Coming",
  data(){
      return{
          movieList:"",
          isLoading:true

      }

  },
  methods:{
    handDetail(movieId){
      console.log(movieId)
      this.$router.push({path:'/comingDetails',query:{movieid:movieId}})

    }
  },
  mounted() {
    this.$axios.get("/api/movieOnInfoList?cityId=10").then((res)=>{
        // console.log(res.data.data.movieList)
        var msg=res.data.msg;
        if(msg==="ok"){
           this.movieList=res.data.data.movieList;
           this.isLoading=false;
        }
        
    }).catch((err)=>{
      console.log(err)
    })
    
  }
};
</script>
<style scoped>
.Coming {
  width: 100%;
  height: auto;
  margin-top: 2.1rem;
  font-size: 0.3rem;
  margin-bottom:1rem;
}
.Coming-li {
  display: flex;
  flex-direction: row;
  padding: 0.2rem 0.2rem;
  border-bottom: 1px solid silver;
}
.Coming-img {
  flex: 3;
  margin-right: 0.2rem;
}
.Coming-img img {
  width: 100%;
  height: 100%;
}
.Coming-content {
  flex: 7;
  margin-right: 0.2rem;
}
.Coming-content p {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  line-height: 0.7rem;
}
.Coming-content span {
  display: inline-block;
  line-height: 0.7rem;
}
.Coming-buy {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  color:red;
}
.Coming-buy > span {
  width: 100%;
  text-align: center;
  border: 1px solid red;
  box-sizing: border-box;
  padding: 0.1rem 0;
  border-radius: 0.1rem;
}
.score {
  color: rgb(218, 174, 54);
}
.s-gang {
  font-size: 0.25rem;
  margin: 0 0.25rem;
}
</style>