Vue2.0 scroll 组件的抽象和应用
Vue2.0 scroll 组件的抽象和应用
本次的系列博文的知识点讲解和代码，主要是来自于Vue 2.0 高级实战-开发移动端音乐WebApp课程，由个人总结并编写，其代码及知识点部分，均有所更改和删减，关于更多 Vue 2.0 的知识和实际应用，还请大家购买课程进行学习实践，该系列博文的发布已得到黄轶老师的授权许可
0 系列文章目录
1 scroll 组件的抽象
在这一小节中，我们将会抽象出一个scroll组件，scroll组件嵌套一个DOM节点，该节点就能够滚动，我们会在该组件中引入BetterScroll插件，props里参数的具体含义可查看BetterScroll的官方文档
// base/scroll.vue
<template>
<div ref="wrapper">
<slot></slot>
</div>
</template>
<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
export default {
props: {
probeType: {
type: Number,
default: 1
},
click: {
type: Boolean,
default: true
},
data: {
type: Array,
default: null
}
},
mounted() {
this.$nextTick(() => {
this._initScroll()
})
},
methods: {
_initScroll() {
if (!this.$refs.wrapper) {
return
}
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click
})
},
disable() {
this.scroll && this.scroll.disable()
},
enable() {
this.scroll && this.scroll.enable()
},
refresh() {
this.scroll && this.scroll.refresh()
}
},
watch: {
data() {
this.$nextTick(() => {
this.refresh()
})
}
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>为了在数据变化之后等待Vue完成更新DOM，我们在数据变化之后会立即使用Vue.nextTick(callback)，这样回调函数在DOM更新完成后就会调用
mounted(){
this.$nextTick(() => {
//这里的代码会在dom渲染完毕运行
})
}然后我们在recommend组件中引入scroll组件，需要注意的是，当scroll组件初始化而discList数据未获取时，scroll组件所包裹的DOM节点是没有高度的，页面是无法滚动的，所以我们要在discList数据渲染之后，scroll组件监听并调用refresh()方法，才能使页面滚动
// recommend.vue
<template>
<div class="recommend" ref="recommend">
<scroll class="recommend-content" :data="discList">
...
</scroll>
</div>
</template>
<script type="text/ecmascript-6">
import Scroll from 'base/scroll/scroll'
export default {
...
components: {
Scroll
}
}
</script>
因为轮播图和热门歌单为同一接口数据，我们在这里只需要监听一个数据即可，但如果这是分别两个不同接口所返回的数据，而异步请求返回数据的时间点并不是一致的，scroll组件所监听到的数据就会不完整，所计算的DOM高度就偏小，导致页面无法滚动或滚动不完整
我们在图片中添加loadImage事件，当图片加载时就重新调用scroll组件的refresh()方法，重新计算DOM的高度，轮播图的图片有多张，每张图片加载后就会重新调用refresh()方法，所以我们通过判断来加载一次即可
还需要注意的是，scroll组件默认了click属性为true，之后我们的轮播图和歌单都是可以被点击的，但一开始我们设置了fastclick所冲突，给需要点击的地方添加class="needsclick"即可
// recommend.vue
<img @load="loadImage" :src="item.picUrl" class="slider-img needsclick">
if (!this.checkloaded) {
this.checkloaded = true
this.$refs.scroll.refresh()
}2 图片懒加载和 Loading 加载动画
图片懒加载我们用到的是vue-lazyload插件，其参数和默认配置在这里不做过多的讲解，可自行查看官方文档
// main.js
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
loading: require('common/image/default.png')
})// recommend.vue
<img width="60" height="60" v-lazy="item.picUrl">Loading的加载动画我们采用Mint UI组件库的Spinner组件
// recommend.vue
<div class="loading-container" v-show="!discList.length">
<mt-spinner type="fading-circle" :size="50" color="#fff"></mt-spinner>
</div>
该章节的内容到这里就全部结束了，源码我已经发到了 GitHub Vue_Music_04 上了，有需要的同学可自行下载