上節獲取並處理了資料，本節展示資料，展示資料的元件可以抽象出來單獨做成一個元件

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
       width: 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
             width: 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%)
         width: 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
         width: 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
         width: 100%
         top: 50%
         transform: translateY(-50%)
   </style>