摘要：
了解better-scroll什么时候是需要refresh计算的？？通常我们遇到的better-scroll不能滚动的问题的根源是什么？？better-scroll的渲染原理是：根据初始化的时机 或者调用refresh()的时机的那个时候的scroll的父元素的高度和子元素的高度之差去做一个计算 计 阅读全文
posted @ 2018-06-13 23:59
猫哥在奔跑
阅读(355)
评论(0)
推荐(0)
摘要：
什么是生命周期 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。 再上图，对生命周期图的标注 每个钩子函数都在啥时间触发 beforeCreate created 阅读全文
posted @ 2018-06-13 23:57
猫哥在奔跑
阅读(147)
评论(0)
推荐(0)
摘要：
z这里如果我们和之前获取轮播图的数据一样来获取表单的数据 发现根本获取不到 原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话 是根本不能够修改请求头的 所以我们就考虑用axios 但是axios又不能进行跨域 那么我们要怎么拿到qq音乐 阅读全文
posted @ 2018-06-13 23:54
猫哥在奔跑
阅读(303)
评论(0)
推荐(0)
摘要：
安装 使用 npm: 或者 使用 bower: 或者直接使用 cdn: main.js设置如下 引入axios 挂载到vue的原型 在webpack.config.js（config—>index.js）文件里设置代理 注意 新版文件会有修改 创建实例 可以使用自定义配置新建一个 axios 实例 阅读全文
posted @ 2018-06-13 23:51
猫哥在奔跑
阅读(8792)
评论(0)
推荐(0)
摘要：
slider.vue组件的模板部分 阅读全文
posted @ 2018-06-13 23:49
猫哥在奔跑
阅读(305)
评论(0)
推荐(0)
摘要：
轮播图组件 推荐页面组件 轮播图组件 阅读全文
posted @ 2018-06-13 23:48
猫哥在奔跑
阅读(237)
评论(0)
推荐(0)
摘要：
先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页（排序样式） 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心 阅读全文
posted @ 2018-06-13 23:21
猫哥在奔跑
阅读(221)
评论(0)
推荐(0)
摘要：
搜索历史 搜索过的关键词 保存在本地存储 localstorage 中，同时多个组件共享搜索历史数据，将数据存到vuex 中，初始值从本地缓存中取得对应key 的值，没有数据默认为空数组 点击搜索关键词列表值的时候触发将关键词写入vuex 中，搜索结果列表suggest 组件向外派发事件，在需要渲染 阅读全文
posted @ 2018-06-13 22:23
猫哥在奔跑
阅读(291)
评论(0)
推荐(0)
摘要：
定义在项目的基础组类别的 tab组件中，定义一个tab切换数量的数组 和一个currentIndex 当前高亮索引 的props，当前高亮（active）的类等于currentIndex index 当前循环的索引值，增加点击派发事件传入index 索引参数， 调用组件的页面接受派发事件点击的ind 阅读全文
posted @ 2018-06-13 22:19
猫哥在奔跑
阅读(298)
评论(0)
推荐(0)
摘要：
建立playlist.vue 组件，在player.vue 组件中引用，点击迷你播放器的播放列表按钮由下至上弹出这个层，所以在player.vue 播放器组件中引用 在playlist.vue 组件中首先设置对外的方法可以控制该组件的显示隐藏，通过mapGetters 获取歌单数据 播放列表功能操作 阅读全文
posted @ 2018-06-13 22:16
猫哥在奔跑
阅读(302)
评论(0)
推荐(0)
摘要：
搜索历史展示每一次搜索过，并选中的关键字，保存数据到数组。搜索历史数据是需要在多个组件中共享的，所以保存在vuex 中 searchHistory 数组中，保存触发在搜索列表点击选中之后派发事件到search.vue 中，search.vue 监听事件并提交actions改变共享数组，改变vuex 阅读全文
posted @ 2018-06-13 21:59
猫哥在奔跑
阅读(337)
评论(0)
推荐(0)
摘要：
搜索结果 列表点击跳转到相应的歌手详情页或者 歌曲页面，通过子路由跳转，和singer 组件一样 在suggest.vue 组件判断如果点击的是歌手，则new 一个歌手对象，通过这个对象的id 属性值传递给路由的参数，通过vuex 传递歌手数据 歌曲点击的逻辑和之前选择歌手点击列表逻辑不同，之前是改 阅读全文
posted @ 2018-06-13 21:55
猫哥在奔跑
阅读(1210)
评论(0)
推荐(0)
摘要：
播放器播放模式有三种，顺序播放，单曲循环，随机播放，定义在vuex 中的字段为 mode。点击切换播放模式的图标。切换模式判断是否为随机播放，如果是随机播放模式，则取得sequenceList 列表数组 。 首先分清楚 sequenceList 是歌单顺序列表，显示在界面上的，playlist 是根 阅读全文
posted @ 2018-06-13 21:53
猫哥在奔跑
阅读(708)
评论(0)
推荐(0)
摘要：
迷你播放器 1.播放器组件会在各个页面的情况下会打开。 首先在vuex state.js 中定义全局的播放器状态 2.进入播放器页面时获取播放列表数据，改变播放状态 在music-list列表中打开 在song-list 组件中派发事件到父组件，传入当前歌曲的信息和索引 在music-list 组件 阅读全文
posted @ 2018-06-13 21:49
猫哥在奔跑
阅读(681)
评论(0)
推荐(0)
摘要：
第一步：在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法 使他能够在singer.vue中调用 第二步：在singer.vue中引入getSingerList方法 并且在created()中调用此方法 加载数据 第三步：由于简单的获取数据已经不符合我们的需求 阅读全文
posted @ 2018-06-13 21:28
猫哥在奔跑
阅读(1018)
评论(0)
推荐(0)
摘要：
技术栈 1，vue2，vuex3,vue-router（子路由）需求分析 1）歌手列表点击歌手会跳转到下级页面歌手详情页，歌手详情页由四个部分组成 歌手图片返回按钮：点击返回歌手tab页随机播放按钮歌手歌曲滚动2）歌曲栏向上滚动到顶部时，图片和播放按钮随之隐藏，保留歌手名和返回按钮 3）歌曲栏向下拖 阅读全文
posted @ 2018-06-13 20:11
猫哥在奔跑
阅读(426)
评论(0)
推荐(0)
摘要：
建立搜索框组件页面，searchBox，组件接受一个可以自定义传入的placeholder 属性。input v-model 双向绑定数据关联到query 中， 在created中监听 query 变量将改变的新值派发给外部父组件，在search.vue 组件中将其引入 search.vue 热门搜 阅读全文
posted @ 2018-06-13 19:46
猫哥在奔跑
阅读(312)
评论(0)
推荐(0)
摘要：
首先引入scroll组件，然后使用： 这里的data是computed计算的来的，因为scroll里面有两组数据： 而当query从有到无的时候，scroll不能自动刷新。所以需要做一点优化： 底部距离的刷新 阅读全文
posted @ 2018-06-13 19:32
猫哥在奔跑
阅读(156)
评论(0)
推荐(0)
浙公网安备 33010602011771号