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设置只占一行。

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

• 在components中注册组件。

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

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

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

        

          

             {{getAccessNum(item.accessnum)}}万
            
            
          
          

            
{{item.songListDesc}}
            
{{item.songListAuthor}}