随笔分类 - 小项目
摘要：1、歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面 利用vuex 1、首先在state下定义一个歌单对象 disc{} 2、在mutaions-types中 定义一个别名 3、在mutations里面创建更改函数 4、在getters里面将该状态与组件映射 4、在recom
阅读全文
摘要：1、频繁切换歌曲时，歌词会跳来跳去 原因： // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是因为它内部有个计时器 //每次currentSong改变的时候都会重新new一个新的lyric-pa
阅读全文
摘要：如果指明了 compareFunction ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素： 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前； 如果 compareFunction(a, b) 等于 0 ， a 和 b 的
阅读全文
摘要：当我们将音乐列表往上滑的时候 我们上面的歌手图片部分也会变小 当我们将音乐列表向下拉的时候 我们的图片会放大 当我们将音乐列表向上滑的时候 我们的图片有一个高斯模糊的效果 并且随着我们的列表向上滑动的越多 图片越模糊 封装prefix 避免写太多的兼容性 由于歌曲列表 排行榜列表 歌单列表样式差不多
阅读全文
摘要：我们现在每首歌曲的数据都是这样的 我们需要在这个数据里面去提取我们需要的部分，来构造成我们需要的数据对象 那我们要和创建singer.js一样 同样也要创建song.js类 我们还要获取到每首歌对应的vkey 这样才能获取到播放源 封装一个工厂函数 为了创建不同的对象 singer要特殊处理 要将数
阅读全文
摘要：第一步：在api文件夹下的singer.js中抛出getSingerDetail方法 第二步：在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三步：在singer-detail.vue的方法中调用getSingerDetail方法 这个方法返回
阅读全文
摘要：state:所有组件的所有状态和数据 放入同一个内存空间去管理 我们把它称为state Vue Components：state里面的数据可以方便的映射到组件上 然后渲染组件 Actions：当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操
阅读全文
摘要：问题一：当我们点击右侧快速入口的时候 被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮？？因为当watch()监控到scrollY的变化了的时候 将scrollY的值和listHeight相比较 判断scrollY在哪个group区间 从而判断高亮的currentIndex 所以要想高亮 就
阅读全文
摘要：快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性 通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到list-view组件 list-vue 组件在props中接受 shortcut快速入口列表 所用到的属
阅读全文
摘要：滚动列表是一个基础组件 他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件 在singer.vue中
阅读全文
摘要：之前得到的歌手数据是用forEach遍历添加的 没有顺序性 我们希望得到的数据是title:"热门"的数据在最上面 title为字母的数据按字母从低到高顺序排列
阅读全文
摘要：第一步：在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法 使他能够在singer.vue中调用 第二步：在singer.vue中引入getSingerList方法 并且在created()中调用此方法 加载数据 第三步：由于简单的获取数据已经不符合我们的需求
阅读全文
摘要：了解better-scroll什么时候是需要refresh计算的？？通常我们遇到的better-scroll不能滚动的问题的根源是什么？？better-scroll的渲染原理是：根据初始化的时机 或者调用refresh()的时机的那个时候的scroll的父元素的高度和子元素的高度之差去做一个计算 计
阅读全文
摘要：在main.js中引入vue-lazyload插件 并使用 注册插件： import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad,{ loading:require('common/image/default.png') }) lazylo
阅读全文
摘要：z这里如果我们和之前获取轮播图的数据一样来获取表单的数据 发现根本获取不到 原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话 是根本不能够修改请求头的 所以我们就考虑用axios 但是axios又不能进行跨域 那么我们要怎么拿到qq音乐
阅读全文
摘要：slider.vue组件的模板部分
阅读全文
摘要：轮播图组件 推荐页面组件 轮播图组件
阅读全文
摘要：用jsonp来获取数据 通过封装方法来获取 在src文件夹下的api文件夹里面去封装一些获取相关部分组件的数据的方法 在api文件夹下的recommend.js中 配置一下公共参数 请求的真实的url实际上是由公共参数和每个页面对应的参数拼接起来的 在recommend.vue组件中获取参数 并且渲
阅读全文
摘要：在npm上下载jsonp的包 这个包的用法 传入的参数是地址加上地址参数的混合 但是想封装一个将地址和地址参数分别传入的jsonp方法 所以来封装一个
阅读全文
摘要：路由配置 在router文件夹下的index.js中配置路由 配置完路由之后再main.js中引入 引入路由之后在App.vue中通过<router-view></router-view>将路由对应的页面渲染到App.vue组件上 切换路由 通过路径哈希值的变化 触发change事件 渲染不同的路由
阅读全文
浙公网安备 33010602011771号