[Vue音乐项目] 第六节 歌单列表

上节获取到歌单信息，本节遍历数据展示歌单列表，展示没有什么好写的不过是几行css样式的问题，为好的用户体验，添加上一些内容：滚动效果，懒加载及加载loading效果。

1. 打开src/componnents/recommend/index.vue文件,敲写以下代码

   <template>    
       <div recommend>
           <m-slider> ... </mslider>
           //歌单列表容器
           <div class="list">
               <h1 class="title">热门推荐歌单</h1>
               <ul>
                   //遍历歌单数据，显示出来
                   <li class="item" v-for="(item,key) in list" :key="key">
                     <div class="icon">
                       //歌单封面
                       <img v-lazy="item.imgurl" @load="imgLoaded" width="60" height="60">
                     </div>
                     <div class="text">
                       //歌单名字
                       <h2 class="name">{{item.creator.name}}</h2>
                       //歌单简介
                       <p class="description">{{item.dissname}}</p>
                     </div>
                   </li>
               </ul>
           </div>
       </div>
   </template>
   <script>
       export default {
           data() {
               return {
                   //歌单数据，在上一节的方法里获取到的数据
                   list: null
               }
           }
       }
   </scrip>
   <style lang="stylus" scoped>
   //导入css变量
   @import '~common/stylus/variable'
   
   .recommend
     //滚动效果的样式，提前写在这里，后面会用到
     .scroll
       height: 90vh
       overflow: hidden
       //歌单容器 
       .list
         //‘热门推荐歌单’标题
         .title
           height: 65px
           line-height: 65px
           text-align: center
           color: $color-theme
           background: $font-size-medium
         //单个歌单
         .item
           display: flex
           box-sizing: border-box
           align-items: center
           padding: 0 20px 20px 20px
           //歌单封面
           .icon
             flex: 0 0 60px
              60px
             margin-right: 20px
             border-radius: 2px
             overflow: hidden
           .text
             display: flex
             flex-direction: column
             justify-content: center
             flex: 1
             line-height: 20px
             overflow: hidden
             font-size: $font-size-medium
             //歌单名字
             .name
               margin-bottom: 10px
               color: $color-text-d
             //歌单简介
             .description
               color: $color-text-i
   </style>
   

2. 打开src/base/scroll/index.vue(没有的话创建一个)，做个滚动组件

   // scroll/index.vue
   <template>
       //滚动容器，固定高度并设置overflow：hidden
       <div ref="wrapper">
           //滚动内容，滚动容器下的唯一子元素，高度由内容撑开且大于父容器高度
           <div> <slot></slot> </div>
       </div>
   <template>
   <script>
   export default {
       //接收父组件的数据
       props: {
           probeType: {
               type: Number,
               default: 1
           },
           click: {
               type: Boolean,
               default: true
           },
           data: {
               type: Array,
               default: null
           }
       },
       //实例挂载后调用[1]
       mounted() {
           //避免获取不到高度的问题
           this.$nextTick(()=>{
               this._initScroll()
           })  
       },
       methods: {
           //创建滚动实例
           _initScroll() {
               if(!this.$refs.wrapper) return
               this.scroll = new Scroll(this.$refs.wrapper,{
                   probeType: this.probeType,
                   click: this.click
               })
           },
           //允许滚动
           enable() {
               this.scroll && this.scroll.enable()
           },
           //禁止滚动
           disable() {
               this.scroll && this.scroll.disable()
           },
           //更新滚动，主要是高度变化的时候重新刷新实例
           refresh() {
               this.scroll && this.scroll.refresh()
           },
       },
       watch: {
           //监测父组件传的data数据，动态跟新滚动实例[2]
           data() {
               setTimeout(()=>{
                   this.refresh()
               },20)
           }
       }
   }
   }
   <script>
   

3. 回到scr/componnents/recommend/index.vue文件，调用滚动组件

   <template>
       <div class="recommend">
           //使用滚动组件，包裹住轮播图和歌单列表[3]
           <m-scroll> 
               //轮播图
               <m-slider> ... </m-slider>
               //歌单列表
               <div class="list> ... </div>
           </mscroll>
       <div>
   </template>
   <script>
   //导入滚动组件[1]
   import 'scroll' from 'base/scroll'
   export default {
       //注册滚动组件[2]
       componnents: {
           'm-scroll': scroll
       }
   }
   </script>
   

4. 做完滚动组件，现在做一个懒加载的效果，数据未获取之前用某一图片代替

   //[1]打开该文件之前，先打开cmd命令行安装vue-lazyload插件
   npm install vue-lazyload --save-dev
   
   //[2]打开src/main.js文件,敲写以下代码
       //导入插件
       import vueLazyLoad from 'vue-lazyload'
       //注册插件
       Vue.use(vueLazyLoad,{
           loading: required('comon/image/default.png')
       })
       
   //[3]打开src/componnents/recommend/index.vue，敲写以下代码 
       <template>
           //找到该标签
           <img :src="item.imgurl" width="60" height="60">
           //改为如下 load钩子避免多次触发
           <img v-lazy="item.imgurl" @load="imgLoaded" width="60" height="60">
       </template>
       <script>
           ...
       <sript>
   

5. 歌单列表从获取数据到渲染有过程间隙，可通过loading达到用户体验优化

   //[1] 打开src/base/loading/index.vue,敲写以下代码
   <template>
     <div class="loading">
       //加载符号
       <img width="24" height="24" src="./loading.gif">
       //加载提示
       <p class="tip">{{title}}</p>
     </div>
   </template>
   <script type="text/ecmascript-6">
     export default {
       props: {
         //自定义加载提示，由父组件传入
         title: {
           type: String,
           default: '正在载入...'
         }
       }
     }
   </script>
   <style scoped lang="stylus" rel="stylesheet/stylus">
     @import "~common/stylus/variable"
     //加载层
     .loading 
        100%
       text-align: center
       //加载提示
       .tip
         line-height: 20px
         font-size: $font-size-small
         color: $color-text-l
   </style>
   
   //[2]打开src/componnents/recommend/index.vue，使用该加载组件
   <template>
       <div class="recommend>
           <m-srcoll>
               <m-slider> ... </m-slider>
               <div class="list">
                   <h1> ... </h1>
                   <li> ... </li>
                   //[2.3]使用组件,数据未获取之前显示该loading
                   <m-loading v-if=" !list "> </m-loading>
               <div>
           </m-scroll>
       </div>
   </template>
   <script>
       //[2.1]引入组件
       import loading from 'base/loading'
       export default {
           //[2.2]注册组件
           componnents: {
               'm-loading': loading
           }
       }
   </script>