[Vue音乐项目] 第八节 歌手页面(页面展示+滚动效果)

上节获取并处理了数据，本节展示数据，展示数据的组件可以抽象出来单独做成一个组件

1. 打开src/base/listview/index.vue(没有的话创建一个)，敲写如下代码

   // listview/index.vue
   <template>
       //[3] 使用组件
       <m-scroll>
           <ul>
               //遍历第一层
               <li class="list-group" v-for="(group,key) in data" :key="key" ref="listgroup">
                   //分组标题
                   <h2 class="list-group-title">{{group.title}}</h2>
                   <ul>
                       //遍历第二层
                       <li class="list-group-item" 
                       v-for="(item,index) in group.data" :key="index">
                           //歌手头像
                           <img class="avatar" v-lazy="item.avatar" alt="">
                           //歌手名字
                           <span class="name">{{item.name}}</span>
                       </li>
                   </ul>
               </li>
           </ul>
           //右侧浮动(字母索引)
           <div class="list-shortcut" >
               <ul>
                   //遍历并输出title的第一个字，如‘热门’输出‘热’
                   <li class="item"  v-for="(item,index) in menu" :key="index">
                       {{item}}
                   </li>
               </ul>
           </div>
       </m-scroll>
   </template>
   <script>
       //[1] 导入组件
       import scroll from 'base/scroll'
       export default {
           data() {
               return {
                   //歌手数据
                   data: null
               }
           },
           computed: {
               //歌手索引
               menu() {
                   return this.data.map((group)=>{
                       return group.title.substr(0,1)
                   })
               },
           }
           //[2] 注册组件
           components: {
               'm-scroll': scroll
           }
       }
   </script>
   <style lang="stylus" scoped>
     @import "~common/stylus/variable"
       
     .listview
       position: relative
        100%
       height: 90vh
       overflow: hidden
       background: $color-background
       //[1] 歌手列表
       .list-group
         padding-bottom: 30px
         .list-group-title
           height: 30px
           line-height: 30px
           padding-left: 20px
           font-size: $font-size-small
           //color: $color-text-l
           color: #fff
           background: $color-highlight-background
         .list-group-item
           display: flex
           align-items: center
           padding: 20px 0 0 30px
           .avatar
              50px
             height: 50px
             border-radius: 50%
           .name
             margin-left: 20px
             color: $color-text-l
             font-size: $font-size-medium
       //[2]歌手索引
       .list-shortcut
         position: absolute
         z-index: 30
         right: 0
         top: 50%
         transform: translateY(-50%)
          20px
         padding: 20px 0
         border-radius: 10px
         text-align: center
         background: $color-background-d
         font-family: Helvetica
         .item
           padding: 3px
           line-height: 1
           color: $color-text-l
           font-size: $font-size-small
           &.current
             color: $color-theme
       //[3] 固定字栏
       .list-fixed
         position: absolute
         top: 0
         left: 0
          100%
         .fixed-title
           height: 30px
           line-height: 30px
           padding-left: 20px
           font-size: $font-size-small
           //color: $color-text-l
           color: #fff
           background: $color-highlight-background
       //[4]加载动画 ps:暂时用不到
       .loading-container
         position: absolute
          100%
         top: 50%
         transform: translateY(-50%)
   </style>