vue慕课网音乐项目手记：11-给首页加个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>

css样式如下：

<style lang="stylus" scoped>
  .loading
    width 100%
    text-align center
    .desc
      line-height 20px
      color $color-text-l
      font-size $font-size-small
</style>

在组件里面使用：外面给一个盒子，控制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%，是一个小技巧。