05.vue.2.X开发音乐App-推荐页面之热门歌单

github:https://github.com/Ching-Lee/vue-music

热门歌单

1.首先分析后台数据接口

还是slider相同的数据接口，我们需要的数据在songList中

• 我们将拿到的后台数据赋值给hotSongList
  在recommend.vue中添加data

 data () {
    return {
      sliderData: [],
      hotSongList: []
    }
  },
methods: {
    _getRecommend () {
      getRecommend().then((result) => {
        if (result.code === ERR_OK) {
          this.sliderData = result.data.slider
          this.hotSongList = result.data.songList
        }
      })
    }
  }

2.创建song-ist歌单组件

创建组件

• 分析组件布局及样式
  组件由标题h1和列表ul构成
  每个li的宽度设置为50%，设置成内联块元素。
  li中的.card(div)设置成宽度为父元素的95%，这样会有些偏左边。我们设置margin-left 为2.5%，刚好到中间。
  在card中包括两个div，.icon中国是一个图片，这里设置宽度为其父元素的100%。
  .describe是描述信息，.songListDesc设置只占一行。

<template>
  <div>
    <h1 class="list-title">{{title}}</h1>
    <ul>
      <li v-for="item in list" v-bind:key="item.id" class="recommend_item">
        <div class="card">
          <div class="icon">
            <img width="100%" v-bind:src="item.picUrl">
          </div>
          <div class="describe">
            <p class="songListDesc">{{item.songListDesc}}</p>
            <p class="songListAuthor">{{item.songListAuthor}}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    title: '',
    list: []
  }
}
</script>

<style>
  .recommend_item{
    width: 50%;
    display: inline-block;
    margin-bottom: 1rem;
  }
  .card{
    width: 95%;
    margin-left: 2.5%;
    background-color: white;
  }
  .card .describe{
    padding: 0.5rem 0.25em;
  }
  .card .songListDesc{
    font-size: 14px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
  }
  .card .songListAuthor{
    font-size: 12px;
    color: orange;
    margin-top: 0.5rem;
  }
  .list-title{
    padding: 1rem 0.5rem;
    font-weight: bold;
  }
</style>

• 在recommend.vue中调用组件，并传递属性

 <div v-if="hotSongList.length" class="recommend-song">
      <song-list v-bind:list="hotSongList" title="热门歌单"></song-list>
    </div>

• 在components中注册组件。

components: {
    'slider': Slider,
    'song-list': Songlist
  },

3.添加如下播放和耳机图标

在阿里矢量图标库选择svg图标下载http://www.iconfont.cn
然后将矢量图制作成icon https://icomoon.io/app/#/select，把图标引入import，然后选中点击Generator font，下载引入项目。

<li v-for="item in list" v-bind:key="item.id" class="recommend_item">
        <div class="card">
          <div class="icon">
            <i class="icon-earphone"> {{getAccessNum(item.accessnum)}}万</i>
            <img width="100%" v-bind:src="item.picUrl">
            <i class="icon-player"></i>
          </div>
          <div class="describe">
            <p class="songListDesc">{{item.songListDesc}}</p>
            <p class="songListAuthor">{{item.songListAuthor}}</p>
          </div>
        </div>
      </li>

<script type="text/ecmascript-6">
export default {
  props: {
    title: '',
    list: []
  },
  methods: {
    getAccessNum (num) {
      num = num / 10000
      return num.toFixed(2)
    }
  }
}
</script>

<style>
  @import "../../../static/style.css";
 .card .icon{
    position: relative;
  }
  .card .icon .icon-earphone{
    position:absolute;
    font-size: 0.5rem;
    left:0.5rem;
    bottom: 0.8rem;
    color: white;
  }
  .card .icon .icon-player{
    position:absolute;
    right:0.5rem;
    bottom: 0.5rem;
    font-size: 1.5rem;
  }

4.头部和导航栏不随滚动条滚动

App.vue中开启固定定位，因为开启定位后，会脱离文档流，所以让内容区向下移头部的高度。

<template>
  <div id="app">
    <div class="header">
      <main-header></main-header>
      <tab></tab>
    </div>
    <div class="content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

.header{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    z-index: 1;
}
  .content{
    margin-top:94px;
  }