【用Vue来实现音乐播放器（八）：自动轮播图啊】的更多相关文章

vue小练习--音乐播放器

1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>音乐播放器</title> <meta name="viewport" content="width=device-width ,initial-scale…

用Vue来实现音乐播放器（三十八）：歌词滚动列表的问题

1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是因为它内部有个计时器 //每次currentSong改变的时候都会重新new一个新的lyric-parser出来, //但是我们之前的对象并没有做清理操作 也就是说我们之前对象还是有计时器在里面 //所以歌词会来回闪动 解决办法: 在切换歌曲之前 即getLyric()之前 重新去getLyric(…

用Vue来实现音乐播放器（九）：歌单数据接口分析

z这里如果我们和之前获取轮播图的数据一样来获取表单的数据  发现根本获取不到 原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话  是根本不能够修改请求头的  所以我们就考虑用axios  但是axios又不能进行跨域  那么我们要怎么拿到qq音乐的服务器的数据呢??其实是有办法解决的:我们可以进行后端接口代理  那么什么是后端代理呢?? 如果要使用axios直接进行跨域访问是不可以的,这是就需要配置代理了,为什么要配置代理呢? 原因…

Vue实战：音乐播放器（一） 页面效果

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

用Vue来实现音乐播放器（10）：Scroll组件的抽象和应用

了解better-scroll什么时候是需要refresh计算的??通常我们遇到的better-scroll不能滚动的问题的根源是什么??better-scroll的渲染原理是:根据初始化的时机  或者调用refresh()的时机的那个时候的scroll的父元素的高度和子元素的高度之差去做一个计算  计算出他可以滚动的位置  所以我们去实例化或者refresh这个scroll的时候  一定要保证  这个dom是已经渲染好的 我们能正确计算到高度的 如果我们有数据变化以及dom变化的场景的时候 …

用Vue来实现音乐播放器（八）：自动轮播图啊

slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <div class="slider-group" ref="sliderGroup"> //要注意slot插槽里面的数据要先渲染出来 <slot> </slot> </div> <div class="dots&q…

用Vue来实现音乐播放器（十八）：右侧快速入口点击高亮

问题一:当我们点击右侧快速入口的时候  被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候  将scrollY的值和listHeight相比较  判断scrollY在哪个group区间  从而判断高亮的currentIndex  所以要想高亮  就要让scrollY变化  但点击右侧快速入口的时候 我们没有有scroll方法  直接走的scrollTo方法  所以无法派发scroll事件  触发scrollY的变化   所以我们要手…

用Vue来实现音乐播放器（二十三）：音乐列表

当我们将音乐列表往上滑的时候   我们上面的歌手图片部分也会变小 当我们将音乐列表向下拉的时候   我们的图片会放大 当我们将音乐列表向上滑的时候   我们的图片有一个高斯模糊的效果 并且随着我们的列表向上滑动的越多  图片越模糊 封装prefix  避免写太多的兼容性    由于歌曲列表  排行榜列表 歌单列表样式差不多  所以我们做一个list-view的组件  方便复用 第一步:将从父组件页面中接受需要用到的数据 将接受到的这些数据应用在页面中 背景图:    音乐列表的位置 设置scro…

用Vue来实现音乐播放器（二十一）：歌手详情数据抓取

第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三步:在singer-detail.vue的方法中调用getSingerDetail方法  这个方法返回一个promise实例  所以要用then 得到获取成功的情况…

用Vue来实现音乐播放器（二十）：Vuex初始化及歌手数据的配置

state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操作 比如与后端的一些交互  然后它可以取commit一个mutations 注意:我们也可以在组件中直接commit一个mutations Mutations:是唯一可以修改State的途径  其他…