用Vue来实现音乐播放器(十五):处理得到的歌手数据
之前得到的歌手数据是用forEach遍历添加的 没有顺序性 我们希望得到的数据是title:"热门"的数据在最上面 title为字母的数据按字母从低到高顺序排列
var hot=[]
var ret=[]
for(let key in map){
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)=>{
return a.title.charCodeAt(0)-b.title.charCodeAt(0)
})
} return hot.concat(ret)
用Vue来实现音乐播放器(十五):处理得到的歌手数据的更多相关文章
- 用Vue来实现音乐播放器(二十一):歌手详情数据抓取
第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三 ...
- 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发
路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...
- vue小练习--音乐播放器
1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...
- 用Vue来实现音乐播放器(三十八):歌词滚动列表的问题
1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...
- 用Vue来实现音乐播放器(十六):滚动列表的实现
滚动列表是一个基础组件 他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件 <template> < ...
- 用Vue来实现音乐播放器(十四):歌手数据接口抓取
第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法 使他能够在singer.vue中调用 import jsonp from '../common/j ...
- Vue实战:音乐播放器(一) 页面效果
先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心
- 用Vue来实现音乐播放器(二十):Vuex初始化及歌手数据的配置
state:所有组件的所有状态和数据 放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件 ...
- 用Vue来实现音乐播放器(十八):右侧快速入口点击高亮
问题一:当我们点击右侧快速入口的时候 被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候 将scrollY的值和listHeight ...
- 用Vue来实现音乐播放器(四十):歌单详情页布局以及Vuex实现路由数据通讯
1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面 利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中 定义一个别名 ...
随机推荐
- 通过编写串口助手工具学习MFC过程——(七)添加Tab Control控件
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
- springboot2.0-统一处理返回结果和异常情况
一.统一处理返回结果和异常处理的原因: 1.在springboot项目里我们希望接口返回的数据包含至少三个属性: a.code:请求接口的返回码,成功或者异常等返回编码,例如定义请求成功,code = ...
- Asp.net MVC 发布到IIS6
1.发布网站 2.打开IIS,添加网站 3.修改程序池,改为.net 4.0 4.添加虚拟目录(及添加aspnet_isapi.dll文件,该文件目录在“C:\Windows\Microsoft.NE ...
- bootstrap table实现iview固定列的效果
因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果 <!DOCTYPE html> <html lang=&q ...
- node静态资源服务器的搭建----访问本地文件夹(搭建可访问静态文件的服务器)
我们的目标是实现一个可访问静态文件的服务器,即可以在浏览器访问文件夹和文件,通过点击来查看文件. 1.先创建一个文件夹anydoor,然后在该文件夹里npm init一个package.json文件, ...
- Ruby下安装cocoapods
常规安装:(文末:特殊安装) 注: 1.Mac OS X EI Capitan 10.11中需要更改安装路劲: sudo gem install -n /usr/local/bin cocoapods ...
- 01.Linux-CentOS系统清理缓存脚本
#自动清理缓存脚本 [root@k8s-node3 ~]# vim freemem.sh#! /bin/sh#当前已使用内存大小used=`free -m | awk 'NR==2' | awk '{ ...
- 012-linux系统管理——进程管理与工作管理
linux系统管理——进程管理 top 命令是使用 top - :: up :, user, load average: 0.06, 0.60, 0.48 #五分钟钱,十分钟前,十五分钟前负载的值根据 ...
- Nginx配置https兼容http
现象 如果一个https站点里面有引用一些http的静态资源,图片可以正常加载,但是js文件.css文件就会加载失败,如下图: 原因 为了解释这个问题,首先要理解一下Mixed Content的概念: ...
- Python核心技术与实战——四|Python黑箱:输入与输出
抽象的看,Python程序可以被看成一个黑箱:通过输入流将数据送达,经过处理后在输入,也就是说具备了一个图灵机运作的必要条件. 输入输出基础 最简单的输入是来自键盘的操作 name = input(' ...