用Vue来实现音乐播放器（十六）：滚动列表的实现

Posted 2020-11-17 cmy1996

滚动列表是一个基础组件  他是基于scroll组件实现的

在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件

 

<template>
    <!-- 当父组件传递给子组件的数据发生变化的时候 scroll可以监听到此时高度会发生变化 -->
    <!-- 子组件这里的:data和props里面的data相对于 -->
    <!-- 父传子的时候 data是对应的props里面的值 -->
    <scroll class="listview" :daaaaa="data" >
        <!-- scroll插件作用于第一个子元素 ul-->

        <!-- 父元素传来的data数组的形式是[{title:"热门",items:Array(3)},{title:"A",items:Array[4]}] -->
        <!-- 外层的ul下的li 代表每一个title对应的items -->
        <ul>
            <!--这里面的每一个li 是代表一个组别 比如热门歌手组别 姓氏为A的组别 姓氏为B的组别等等 -->
            <li v-for="(group,index) in data" class="list-group" :key="index">
                <h2 class="list-group-title">{{group.title}}</h2>
                <!-- 内层的ul下的li 代表每一个title对应的items下的Array里面的内容 -->
                <ul>
                    <!-- 这里面的每一个li代表每个组别里面的每一位歌手 -->
                    <li v-for="(item,index) in group.items" class="list-group-item" :key="index">
                        <img v-lazy="item.avatar" class="avatar">
                        <span class="name">{{item.name}}</span>
                    </li>
                </ul>
            </li>
        </ul>
    </scroll>
</template>
<script>

//因为是滚动列表  所以导入Scroll组件
import Scroll from ‘../scroll/scroll.vue‘

export default {
    
    // 接受父盒子传入的数据 
    props:{
        data:{
            type:Array,
            default:[]
        }
    },
    components:{
        Scroll
    }
}
</script>
<style lang="stylus" scoped>
    @import ‘../../common/stylus/variable.styl‘
    .listview
        position: relative
        width: 100%
        height: 100%
        overflow: hidden
        background: $color-background
        .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
                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
</style>

在singer.vue中

<template>
    <!-- better-scroll的滚动条件是：父容器的高度是固定的
        子容器要撑开他  所以这个fixed布局是为了固定父容器的高度
     -->
    <div class="singer">
        <!-- 这个singer类就相当于是scroll的父类元素 -->
        <!-- 给子组件传递值 singers -->
        <!-- 给data加上:data 说明后面跟的singers是变量 -->
        <!-- 父组件真正传递的值是singers -->
       <list-view :data="singers"></list-view>
    </div>
</template>
<script>

import ListView from ‘../../base/listview/listview.vue‘
import {getSingerList} from ‘../../api/singer.js‘
import {ERR_OK} from ‘../../api/config.js‘
import Singer from ‘../../common/js/singer.js‘

const HOT_NAME="热门" //由于页面布局是热门 然后下面是数组
// 将取到的this.singer数据中的前10条定义为热门数据
const HOT_SINGER_LEN=10

export default {
    data(){
        return {
            singers:[]
        }
        
    },
    created(){
        this._getSingerList()
    },
    methods:{
        _getSingerList(){
            getSingerList().then((res)=>{
                if(res.code===ERR_OK){
                    // console.log(res.data)
                    this.singers=this._normalizeSinger(res.data.list)
                    console.log(this._normalizeSinger(res.data.list))
                }
            })//虽然这个方法可以返回数据  但并不是我们想要的
                //按照需求  我们应该得到热门歌手数据 和 可以根据歌手的姓氏
                //来查找到该歌手  于是我们在写一个方法来操作这个方法得到的数据  
        },
        _normalizeSinger(list) {
            let map = {
                hot: {
                    title: HOT_NAME,
                    items: []
                }
            }
            list.forEach((item, index) => {
                if (index < HOT_SINGER_LEN) {
                        map.hot.items.push(new Singer({
                            name: item.Fsinger_name,
                            id: item.Fsinger_mid
                        }))
                }

                //将姓氏聚类
                const key = item.Findex
                if (!map[key]) {//判断此时map对象里面有没有key这个键
                                //如果没有的话  就给对象添加这个键值对
                    map[key] = {
                        title: key,
                        items: []
                    }
                }
                //举例：如果此时key为A
                //此时map只有一个键为hot 所以我们给map对象添加一个键为A 这个键A对应的值为{title:"A",items:[]}


                map[key].items.push(new Singer({
                    name: item.Fsinger_name,
                    id: item.Fsinger_mid
                }))

                //再执行push操作 给键A对应的键值中的items push值
                // 此时的map为 map={hot:{title:"热门",items:[]},A:{title:‘A‘,items:[刚才新添加的值 即此时遍历到的item]}}
            })

            // console.log(‘map......‘,map)

            // 为了得到有序列表  处理map
            let hot=[]
            let ret=[]
            for(let key in map){//map是对象也可以用for in 遍历来做
                let val=map[key] //这里是map对象的key键对应的键值
                if(val.title.match(/[a-zA-Z]/)){
                    ret.push(val)
                }else if(val.title==="热门"){
                    hot.push(val)
                }
            }

            //为了要让ret里面的数据是按字母升序排列  那么我们可以
            ret.sort((a,b)=>{
                // 因为ret数组中的数是对象 所以要比较两个对象的title的首字母的大小来判断顺序
                return a.title.charCodeAt(0)-b.title.charCodeAt(0)
            })

            return hot.concat(ret);
        }
    },
    components:{
        ListView
    }
}
</script>
<style lang="stylus" scoped>
    .singer
        position: fixed
        top: 88px
        bottom: 0
        width: 100% 

</style>