滚动列表是一个基础组件 他是基于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'.listviewposition: relativewidth: 100%height: 100%overflow: hiddenbackground: $color-background.list-grouppadding-bottom: 30px.list-group-titleheight: 30pxline-height: 30pxpadding-left: 20pxfont-size: $font-size-smallcolor: $color-text-lbackground: $color-highlight-background.list-group-itemdisplay: flexalign-items: centerpadding: 20px 0 0 30px.avatarwidth: 50pxheight: 50pxborder-radius: 50%.namemargin-left: 20pxcolor: $color-text-lfont-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=10export 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.Findexif (!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>.singerposition: fixedtop: 88pxbottom: 0width: 100% </style>
