11 vue音乐项目(某课) 给首页加个loading的效果

首先：写一个loading的组件

<template>
  <div class="loading">
    <img width="20px" height="20px" src="./loading.gif">
    <p class="desc">{{title}}</p>
  </div>
</template>

script里面接收一个title的参数可以传入载入的信息：
<script>
export default {
  props: {
    title: {
      type: String,
      default: '载入中'
    }
  }
}
</script>

在组件里面使用：外面给一个盒子，控制loading显示的位置。

<div class="loading-container" v-show="!discList.length">
   <loading></loading>
</div>

.loading-container
      position absolute
      width 100%
      top 50%
      transform translateY(-50%)

这里借助了css3的transform translateY来实现向上移动自身高度的50%，是一个小技巧。