[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
        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>
    
    
posted @ 2020-10-22 21:53  绝弹笔记  阅读(143)  评论(0编辑  收藏  举报