用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中 定义一个别名 ...
随机推荐
- [LeetCode] 126. 单词接龙 II
题目链接 : https://leetcode-cn.com/problems/word-ladder-ii/ 题目描述: 给定两个单词(beginWord 和 endWord)和一个字典 wordL ...
- django字段类型(Field types)介绍
字段类型(Field types) AutoField 它是一个根据 ID 自增长的 IntegerField 字段.通常,你不必直接使用该字段.如果你没在别的字段上指定主 键,Django 就会自动 ...
- 检验Excel中数据是否与数据库中数据重复
#region 记录Excel中的重复列 /// <summary> /// 记录Excel中的重复列 /// </summary> /// <param name=&q ...
- vue.js-vuex深入浅出
1:正确的创建目录 2:action.js 异步请求数据 3:index.js 文件声名 4:mutation.js 同步事务 修改state中的值 5:state.js 申明和保存变量或对象 6:如 ...
- flutter 基础组件
TextWidget class TextWidget extends StatelessWidget { final TextStyle _textStyle = TextStyle( fontSi ...
- 绑定class -vue
1.值为对象 :class = "{ 'text-red': isActive }" data () { return { isActive : true } } :class = ...
- XTemplate模板学习和使用总结
XTemplate模板学习和使用总结 前言 XTemplate是我接触的第一个模板语言,用在公司的一个NodeJS项目中,跟它打交道经常是因为需要使用它的语法向模板中注入数据.因为是刚入门前端不久 ...
- LOJ2320「清华集训 2017」生成树计数
由于菜鸡的我实在是没学会上升幂下降幂那一套理论,这里用的是完全普通多项式的做法. 要是有大佬愿意给我讲讲上升幂下降幂那一套东西,不胜感激orz! 首先可以想到prufer序列,如果不会的话可以左转百度 ...
- 安装mod_rpaf让apache获取访客真实IP
安装mod_rpaf让apache获取访客真实IP 安装mod_rpaf让apache获取访客真实IP 作者:朱 茂海 /分类:Apache 字号:L M S mod_rpaf是apache ...
- Pytorch详解NLLLoss和CrossEntropyLoss
是什么? https://www.cnblogs.com/marsggbo/p/10401215.html 具体pytorch怎么运算的 https://blog.csdn.net/qq_222102 ...