滚动列表是一个基础组件  他是基于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>

用Vue来实现音乐播放器(十六):滚动列表的实现的更多相关文章

  1. 用Vue来实现音乐播放器(六):JSONP的封装

    在npm上下载jsonp的包 这个包的用法 传入的参数是地址加上地址参数的混合  但是想封装一个将地址和地址参数分别传入的jsonp方法 所以来封装一个 import originJSONP from ...

  2. vue小练习--音乐播放器

    1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  3. 用Vue来实现音乐播放器(三十八):歌词滚动列表的问题

    1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...

  4. Vue实战:音乐播放器(一) 页面效果

    先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心

  5. 用Vue来实现音乐播放器(十七):歌手页右侧快速入口实现

    快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性   通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到l ...

  6. 用Vue来实现音乐播放器(二十):Vuex初始化及歌手数据的配置

    state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件 ...

  7. 用Vue来实现音乐播放器(十八):右侧快速入口点击高亮

    问题一:当我们点击右侧快速入口的时候  被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候  将scrollY的值和listHeight ...

  8. 用Vue来实现音乐播放器(十四):歌手数据接口抓取

    第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法  使他能够在singer.vue中调用 import jsonp from '../common/j ...

  9. 用Vue来实现音乐播放器(四十):歌单详情页布局以及Vuex实现路由数据通讯

    1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面  利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中  定义一个别名 ...

随机推荐

  1. QRCode.js一个生成二维码的javascript库

    前言 最近在开发中遇到一个需求:将后端返回的链接转换成二维码,那么如何来实现呢?我们可以使用QRCode.js来解决这一问题 什么是 QRCode.js? QRCode.js 是一个用于生成二维码的 ...

  2. springmvc,springboot单元测试配置

    1. springmvc单元测试配置 <dependency> <groupId>junit</groupId> <artifactId>junit&l ...

  3. js验证小数或者整数

    利用正则表达式校验是否为小数或者整数,废话不多说直接上demo(此正则表达式无法校验负数和数字为00开头的数字). PS:(如果有不对之处,请批评指教) <!DOCTYPE html> & ...

  4. 中国各个省市县的人口统计,echart展示

    公司要做一个excel形式的人口统计表,我感觉应该更直观一些展示,所以就选用了echart进行展示,由于时间短所以制作的比较简单粗糙,但相应的数据还是有很大的可参考性. 刚好下载了jfinal3.5, ...

  5. 410-基于XCVU9P+ C6678的40G光纤的加速卡

    基于XCVU9P+ C6678的40G光纤的加速卡 一.板卡概述 二.处理板技术指标 •  板卡为自定义结构,板卡大小332mmx260mm; •  FPGA采用Xilinx Virtex Ultra ...

  6. 020-VMware虚拟机作为OpenStack计算节点,上面的虚拟机无法启动问题解决

      问题描述: VMware虚拟机作为OpenStack计算节点,如果安装的操作系统是CentOS7.3,则在此计算节点放置的虚拟机无法正常启动,报如下错误: 在创建计算节点时,为了能让 KVM 能创 ...

  7. 2019长安大学ACM校赛网络同步赛C LaTale (树上DP)

    链接:https://ac.nowcoder.com/acm/contest/897/C来源:牛客网 LaTale 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 32768K,其他语 ...

  8. socket tcp clinet最简单测试程序

    // testsocketclient.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <winsock2.h> ...

  9. gperftools尝试

    最近在找windows下比较好用的函数时间统计的库,听同事说gperftools是跨平台的,就下载下来尝试了一把.发现它确实实现了windows上可以调用的dll库文件(tcmalloc_minima ...

  10. CobaltStrike + Metasploit 联动使用

    本节的知识摘要: 通过 beacon内置的 socks功能将本地 Msf直接代入目标内网 借助 CobaltStrike的外部 tcp监听器通过 ssh隧道直接派生一个 meterpreter到本地 ...