摘要：
歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll) 1、需求分析 后台歌词接口返回的数据如下（base64字符串）： 解析成歌词并应用，实现歌词随着播放进度滚动，显示当前歌词，可以对歌词的进度进行控制（即改变歌曲进度，歌词会 阅读全文
posted @ 2018-06-14 03:47
猫哥在奔跑
阅读(4709)
评论(0)
推荐(1)
摘要：
知道disable是干什么的了，如果不加，scroll的高度会高于内容的高度。 使用如下： 优化： 阅读全文
posted @ 2018-06-14 01:49
猫哥在奔跑
阅读(210)
评论(0)
推荐(0)
摘要：
search组件里面调用： search-list中向外部传一个事件。 search组件监听这个事件： 这里的删除需要改变两部分 1：state里的数据 2：localStorage的数据 所以还需要在cache里面封装方法： 然后在action里面调用deleteSearchOne 这样就可以了。 阅读全文
posted @ 2018-06-14 01:48
猫哥在奔跑
阅读(177)
评论(0)
推荐(0)
摘要：
因为搜索关键词在多个模块都有使用，所以要在vuex里面去定义和修改。 state设置: 然后是mutation和types 然后是getters 然后在suggest里面点击的时候。会触发vuex状态的改变。 suggest组件在clickitem的时候。向外触发一个事件 在父组件里面去监控这sel 阅读全文
posted @ 2018-06-14 01:41
猫哥在奔跑
阅读(169)
评论(0)
推荐(0)
摘要：
active的样式 这里有一个问题就是betterscroll在1.0以后的是没有snapLoop的。 所以我安装了0.1.15版本 自动轮播如下 阅读全文
posted @ 2018-06-14 01:32
猫哥在奔跑
阅读(164)
评论(0)
推荐(0)
摘要：
在这一节，会封装一些公用的函数来添加classname，改变image的宽度。 具体如下： 首先：封装一个slider的组件 样式如下： 紧接着就是js部分的代码了。 遇到的问题：上面这样写完后。slide-item的class名字不能添加上，什么原因。 在这里的问题我反复看了一下，具体的意思如下。 阅读全文
posted @ 2018-06-14 01:29
猫哥在奔跑
阅读(240)
评论(0)
推荐(0)
摘要：
环形进度条是基于svg实现的。 逻辑的实现： 阅读全文
posted @ 2018-06-14 01:25
猫哥在奔跑
阅读(664)
评论(0)
推荐(0)
摘要：
首先：应该通过子路由实现： 第二步：添加点击事件： 阅读全文
posted @ 2018-06-14 01:14
猫哥在奔跑
阅读(161)
评论(0)
推荐(0)
摘要：
1、分析设计稿 顶部：标题 左部：歌手列表 右部：快速入口——A-Z的排序切换 数据：动态获取 2、数据获取及处理 2-1：数据 接口获取——https://y.qq.com/portal/singer_list.html 从控制台network界面上，js对应模块找到 fcg-bin/v8.fcg 阅读全文
posted @ 2018-06-14 01:05
猫哥在奔跑
阅读(583)
评论(0)
推荐(0)
摘要：
其他 此应用的全部数据来自 QQ音乐，利用 axios 结合 node.js 代理后端请求抓取 全局通用的应用级状态使用 vuex 集中管理 全局引入 fastclick 库，消除 click 移动浏览器 300ms 延迟 页面是响应式的，适配常见的移动端屏幕，采用 flex 布局 疑难总结 & 小 阅读全文
posted @ 2018-06-14 00:41
猫哥在奔跑
阅读(3299)
评论(0)
推荐(0)
摘要：
state:所有组件的所有状态和数据 放入同一个内存空间去管理 我们把它称为state Vue Components：state里面的数据可以方便的映射到组件上 然后渲染组件 Actions：当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操 阅读全文
posted @ 2018-06-14 00:21
猫哥在奔跑
阅读(328)
评论(0)
推荐(0)
摘要：
问题一：当我们点击右侧快速入口的时候 被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮？？因为当watch()监控到scrollY的变化了的时候 将scrollY的值和listHeight相比较 判断scrollY在哪个group区间 从而判断高亮的currentIndex 所以要想高亮 就 阅读全文
posted @ 2018-06-14 00:17
猫哥在奔跑
阅读(203)
评论(0)
推荐(0)
摘要：
快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性 通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到list-view组件 list-vue 组件在props中接受 shortcut快速入口列表 所用到的属 阅读全文
posted @ 2018-06-14 00:14
猫哥在奔跑
阅读(238)
评论(0)
推荐(0)
摘要：
滚动列表是一个基础组件 他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件 在singer.vue中 阅读全文
posted @ 2018-06-14 00:04
猫哥在奔跑
阅读(1814)
评论(0)
推荐(0)
摘要：
之前得到的歌手数据是用forEach遍历添加的 没有顺序性 我们希望得到的数据是title:"热门"的数据在最上面 title为字母的数据按字母从低到高顺序排列 阅读全文
posted @ 2018-06-14 00:02
猫哥在奔跑
阅读(198)
评论(0)
推荐(0)
摘要：
第一步：在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法 使他能够在singer.vue中调用 第二步：在singer.vue中引入getSingerList方法 并且在created()中调用此方法 加载数据 第三步：由于简单的获取数据已经不符合我们的需求 阅读全文
posted @ 2018-06-14 00:01
猫哥在奔跑
阅读(701)
评论(0)
推荐(0)
浙公网安备 33010602011771号