用Vue来实现音乐播放器，十六：滚动列表的实现
滚动列表是一个基础组件 他是基于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 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 scoped>
.singer
position: fixed
top: 88px
bottom: 0
width: 100%
</style>