四、热门歌单推荐

本节代码更新至：https://github.com/liugezhou/liugezhou_music/tree/chapter4
效果预览：

vue-music.png

axios

---

扣扣音乐在抓取热门歌单推荐数据时，不能通过前面说过的jsonp直接获取，原因为扣扣做了一个host域名为扣扣域名的访问。
于是热门歌单推荐使用axios进行数据抓取。
axios官网：https://github.com/axios/axios

Features

• Make XMLHttpRequests from the browser
• Make http requests from node.js
• Supports the Promise API
• Intercept request and response
• Transform request and response data
• Cancel requests
• Automatic transforms for JSON data
• Client side support for protecting against XSRF

使用：

$ npm install axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

其它不介绍。

flex布局

---

热门歌单推荐使用了双flex布局，关于flex布局的温习：https://www.jianshu.com/p/4aae7365c1a4

better-scroll

---

关于better-scroll的学习：https://github.com/ustbhuangyi/better-scroll

vue-lazyload懒加载

---

github地址：https://github.com/hilongjw/vue-lazyload
在进入推荐页面的时候，会请求诸多图片，但是一般情况下我们只有在滑动到图片处再加载图片，是比较合理的，于是热门歌单推荐的list这里就使用了图片懒加载。

loading插件

---

<template>
  <div class="loading">
    <img src="./loading.gif" width="24" height="24">
    <p class="desc">{{title}}</p>
  </div>
</template>
<script>
export default {
  props:{
    title:{
      type:String,
      default:'正在载入...'
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import "~common/stylus/variable"

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