kingAn123的博客

大概步骤：目标效果三、根据输入值抓取搜索结果数据要点：（一、抓取数据）在QQ音乐移动端网页里，输入值，细心查找数据获取但是双击进去，会发现浏览器没有打开相应的json，而是以下数据也就是说我们要跨域进行数据请求了找到相应url跨域需要的数据，和hash数据build- ->webpack.dev跨域请求url//搜索结果数据before(ap...

大概步骤：目标效果三、排行榜首页添加公共组件要点：“滚动”组件“加载中”组件“mixin”重复逻辑js滚动组件<!--scroll是插槽组件，可为它添加class，写上固定页面的定位，传入data用于refresh滚动组件--><scroll class="rank" :data="..." ref="scroll&

大概步骤：目标效果四、配置排行榜详情页面路由# router-->index.js 配置子路由{ path: '/rank', name: 'Rank', component: Rank, children:[{ //配置动态子路由 path: '/rank/:id', name: 'RankDe...

大概步骤：目标效果五、配置排行榜详情页面vuex数据要点：在store文件夹中定义相关的state、mutations、getters、mutation-types数据分为：排行榜首页点击存入数据mutation排行榜详情页读取数据state（1）配置store# store-->state.jsconst state = { /*排行榜数据*/ t...

大概步骤：目标效果六、新建排行榜详情页 HTML布局要点：使用滑动动画引用封装好的公共组件musiclist即可传入从store中的数据，进组件中引用加载中组件 <transition name="slide"> <div class="rank-detail"> <music-li

大概步骤：目标效果二、抓取排行榜详情页数据要点进入QQ音乐移动端，查找Network中的排行榜首页数据，在XHR中找到使用之前写好的jsonp解析数据的方法，传入处理好的url点击事件传入点击的排行榜idjsonp数据url数据相关代码import jsonp from '@/common/js/jsonp' //引入jsonp模块import {co...

大概步骤：目标效果八、优化要点：给排行榜歌曲列表添加排名符号刷新的时候返回路由rank详情页面头部图片换成第一首歌曲的图片（排行榜图片有字不适用）收费歌曲，无法播放，获取不到url，弹出弹窗排行榜歌曲列表的数据有点庞大，做成分段获取，往下拉再获取剩下的数据（1）歌曲列表添加排名符号因为是公共组件，所以，以父子组件传入标记为是否show在公共组件中加入相关do...

大概步骤：目标效果一、新建搜索框组件的布局要点：把输入框做成公共组件search-box公共组件，尽量只派发事件，而不过多操作（除内部方法）使用iconfont的ui字体使用flew布局设置input输入框的默认内容样式配置好组件结构，在父组件search.vue中引用SearchBox.vue<div class="search-box"> &...

大概步骤：目标效果二、输入框的数据触发事件要点：使用双向数据绑定 v-model监听输入框输入的数据，并传递给父组件去操作添加取消按钮，清空输入框和显示隐藏取消按钮（一、双向数据绑定）<!--双向数据绑定在query变量上--><input v-model="query" /><!--展示按钮在query有值的时候，点击事件

大概步骤：目标效果二、抓取排行榜首页数据要点进入QQ音乐移动端，查找Network中的排行榜首页数据，在XHR中找到使用之前写好的jsonp解析数据的方法，传入处理好的urljsonp数据url数据相关代码import jsonp from '@/common/js/jsonp' //引入jsonp模块import {commonParams,objec...

大概步骤：一、新建排行榜首页HTML布局要点：灵活使用到flew布局左右布局（图片文字）上下布局（文字中的li）<div></div>二、获取排行榜首页数据 是jsonp方法，获取到XHR数据三

大概步骤：目标效果十三、优化要点：搜索历史和热门搜索添加滚动适配小播放组件搜索输入框节流设置滚动搜索结果列表，收起手机端输入键盘（一）、搜索历史和热门搜索添加滚动在search.vue中为2个组件外包一个div再添加滚动组件<scroll ref="scroll" :data="shortcut"> <div class="search-s...

大概步骤：目标效果五、搜索结果列表布局要点：根据li数组项的type区分当前项是歌手和歌曲区分后dom渲染不同的内容SearchSuggest.vue<ul> <li v-for="item of result"> <i class="iconfo

大概步骤：目标效果六、下拉刷新要点：添加滚动公共组件scroll给滚动组件，添加滚动到底部方法，触发事件触发获取数据事件，page为++即：获取搜索结果数据有两种情况监听到输入框的值改变获取数据，page为1滚动到底部获取数据，page为++（一）、添加滚动事件↓scroll.vue开启滚动到底部标识flag派发事件到父组件操作props:{ //开启...

大概步骤：目标效果五、搜索结果列表布局要点：根据li的歌手type，来渲染相应的值↓suggest.vue<ul> <li v-for="(item,index) of result"> <i class="iconfont " :class="_otherIcon(item)"> &amp

大概步骤：目标效果七、点击歌曲li要点：与排行榜歌曲列表的歌曲li点击对比是把获取到的所有歌曲列表设置为vuex中的播放列表而搜索结果的歌曲li是把一首歌添加进播放列表，而且不是简单push，而是插入正在播放因此要和排行榜歌曲li一样要操作的mutations是多个，利用到actions，来操作多个mutations（一）、点击触发actions事件↓sea...

大概步骤：目标效果九、搜索历史数据新建要点：新建vuex的state数组变量，点击时存入和调用时读取数据即可利用本地缓存插件，取和操作再存如果不可考虑本地缓存的话，就是获取到state中数组，并把点击的值push进行数组，然后存下这个数组替换掉state中的即可而要存入本地缓存的话，即push进本地缓存，state则从本地缓存中获取。操作稍微复杂因此，单独做成js用...

大概步骤：目标效果十、搜索历史组件布局要点：↓suggestHistory.vue<div class="search-history" > <div class="search-history_title"> <h1>搜索历史</h1> <i class="iconfont" @click=&

大概步骤：目标效果七、点击歌手li要点：点击li添加到输入框点击x删除当前搜索历史点击垃圾桶清空搜索历史（一）、点击添加到输入框在热门搜索关键词里是一样的逻辑，主要是做好父子组件事件的派发就可以了。↓search.vue addQuery(item){ this.$refs.searchbox.setQuery(item) },（二）、点击...

大概步骤：目标效果十二、弹窗页面要点：弹窗样式布局公共组件，外部可控性（一）、点击垃圾桶show弹窗页面为了不在没必要的地方渲染，不想以前那样用v-show标识来打开，而是在弹窗页面的组件中设置内置方法↓searchHistory.vue<!--弹窗组件--> <confirm ref="confirm" co...

大概步骤：目标效果三、新建热门搜索关键词组件的数据获取和布局要点：QQ音乐移动端网页抓取热门搜索的关键词数据截取关键词数据数组的前10个对数据列表布局为圆角边框样式点击热门搜索关键词，关联到输入框中（一）抓取热门搜索关键词数据↓ api - ->search.jsimport jsonp from '@/common/js/jsonp' //引入...