在进行页面切换时，页面会重新加载recommend.vue中的created，mounted等造成对资源的浪费，此时完全没有必要，我们只需要吧缓存加载到dom中即可
App.vue
<keep-alive>
<rounter-view></router-view>
</keep-alive>
此时切换回来之后就会是上次轮播到的那张图，同时可以解决轮播图抖动的问题。
同时在slider.vue中可添加
destoryed(){
clearTimeout(this.timer)
}
//当一个页面加载完成后及时清除资源，是一个好的习惯要养成，是一个内存的释放
歌单数据接口
当我们拿到QQ音乐的接口直接在jsonp中进行处理时，不会获得预想的数据，会报错500,5XX是服务器端的错误，主要引起原因是：
image.png
HOST：是域名的来源
Referer:表示请求的来源
- 解决方法--代理
在dev-server.js中手动添加代理，需要用到axios安装axios后，就会欺骗浏览器我们发出的是一个ajax请求这也是代理的意思
var axios = require('axios')
var apiRoutes = express.Router()
apiRoutes.get('/getDiscList', function (req, res) {
var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
res.json(response.data)//把从浏览器获取的数据，传递给前端进行展示
}).catch((e) => {
console.log(e)
})
})
app.use('/api', apiRoutes)
此时我们的请求不再是jsonp的了
return jsonp(url, data, options)//改为
export function getDiscList() {
const url = '/api/getDiscList'
const data = Object.assign({}, commonParams, {
platform: 'yqq',
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode: 0,
categoryId: 10000000,
rnd: Math.random(),
format: 'json'//把jsonp格式转换为json格式
})
return axios.get(url, {//对数据的请求
params: data//传递的参数为params而非param
}).then((res) => {
return Promise.resolve(res.data)
})
}
歌单接口数据渲染到DOM中
<div class="recommend-list">
<h1 class="list-title">热门歌单推荐</h1>
<ul>
<li @click="selectItem(item)" v-for="item in discList" class="item">
<div class="icon">
<img width="60" height="60" v-lazy="item.imgurl">
</div>
<div class="text">
<h2 class="name" v-html="item.creator.name"></h2>
<p class="desc" v-html="item.dissname"></p>
</div>
</li>
</ul>
</div>
//v-html会对内容进行转义
image.png
实现以上歌单列表时可采用flex布局实现，同时采用
align-itms:center实现垂直居中的效果
歌单实现滚动效果
创建base组件下的scroll.vue
<div ref="wrapper">
<slot></slot>//插槽
</div>
export default {
//以下属性可在better-scroll的官网上查看readme
props: {
probeType: {//监听一些类型，是大幅度拖动还是点击
type: Number,
default: 1
},
click: {//是否点击
type: Boolean,
default: true
},
data: {//获取的数据
type: Array,
default: null
},
}
//初始化滚动
_initScroll() {
if (!this.$refs.wrapper) {//当他不存在时
return
}
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click
})
<scroll ref="scroll" class="recommend-content" :data="discList">
</scroll>
//在scroll中定义 :data="discList"，并且在Scroll.js中
watch: {
data() {
setTimeout(() => {
this.refresh()//重新加载数据
}, this.refreshDelay)
}
}
此时会出现一个情况当顶部的滚动图片出现加载延迟的时候，歌单列表会先一步加载出来，此时再滑动时候，会出现无法滑动到底额情况，出现这种情况的原因是因为，当滚动图片区没有数据时，热门歌单获取的高度就变高了，多出了滚动区图片的高度，所以进行设置，
loadImage() {
if (!this.checkloaded) {
this.checkloaded = true
this.$refs.scroll.refresh()
}
},
//此处加载出图片高度
vue-lazyload图片懒加载
- 为什么应用图片懒加载？
在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载
详情请到https://www.cnblogs.com/liliangel/p/6122836.html
//main.js中引入lazyload
Vue.use(VueLazyload, {
loading: require('common/image/default.png')
})
//默认懒加载的图片，webpack会解析require
<div class="icon">
<img width="60" height="60" v-lazy="item.imgurl">
</div>
loading基础组件的开发与应用
当数据未加载时显示一个转圈的图标，可以利用element-ui 实现
