用Vue来实现音乐播放器（10）：Scroll组件的抽象和应用
了解better-scroll什么时候是需要refresh计算的？？通常我们遇到的better-scroll不能滚动的问题的根源是什么？？better-scroll的渲染原理是：根据初始化的时机 或者调用refresh()的时机的那个时候的scroll的父元素的高度和子元素的高度之差去做一个计算 计算出他可以滚动的位置 所以我们去实例化或者refresh这个scroll的时候 一定要保证 这个dom是已经渲染好的 我们能正确计算到高度的
如果我们有数据变化以及dom变化的场景的时候 我们一定要去让better-scroll重新refresh() 然后我们封装了scroll组件之后 我们就不用在外部掉获取到数据之后 再this.$refs.scroll.refresh() 我们只需要把数据传递给scroll scroll就能监听到数据变化 scroll组件就能自己计算高度
<template>
<div class="recommend">
<scroll class="recommend-content">
<!-- //scroll插件作用于他的第一个子元素 -->
<!-- 局部轮播的父级 -->
<div>
<div class="slider-wrapper" v-if="recommend.length"> //这里也是为了在初始化实例和refresh()之前确保dom已经渲染好了
<slider>
<!-- 填写插槽 -->
<div v-for="(item,index) in recommend" :key="index">
<a :href="item.linkUrl">
<img :src="item.picUrl">
</a>
</div>
</slider>
</div>
<div class="recommend-list">
<h1 class="list-title">热门歌单推荐</h1>
<div class="mod-playlist">
<ul class="playlist-list">
<li v-for="(item,index) in discList" :key="index" class="playlist-item">
<div class="playlist-item-box">
<div class="playlist-cover mod-cover">
<a href="#">
<img :src="item.imgurl" class="pic">
</a>
</div>
<h4 class="playlist-title">
<span class="playlist-title-txt">{{item.dissname}}</span>
</h4>
<div class="playlist-author">
<a href="#">{{item.creator.name}}</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</scroll>
</div>
</template>
<script>
import Scroll from '../../base/scroll/scroll.vue'
import Slider from '../../base/slider/slider.vue'
import {getRecommend,getDiscList} from '../../api/recommend.js'
import { ERR_OK } from '../../api/config.js'
export default {
data(){//为了将实例里面的轮播图数据与dom相关 要有一个data()方法
return {
recommend:[],
discList:[]
}
},
created(){//一般在这个生命钩子里面加载数据
this._getRecommend(),
this._getDiscList()
},
methods:{
_getRecommend(){
getRecommend().then((res)=>{//这个res就是我们抓取到的数据对象
if(res.code===ERR_OK){
// console.log(res.data.slider)
this.recommend=res.data.slider
}
})
},
_getDiscList(){
getDiscList().then((res)=>{
if(res.code===ERR_OK){
// console.log(res.data.list)
this.discList=res.data.list
}
})
},
},
components:{
Slider,Scroll
}
}
<template>
<div ref="wrapper">
<slot></slot>
</div>
</template>
<script>
//将better-scroll相关都放在这里 可以实现代码的复用
import BScroll from 'better-scroll'
export default {
props: {
probeType: {
type: Number,
default: 1
},
click: {
type: Boolean,
default: true
},
data: {//因为我们是滚动的 所以数据会改变 需要一个数组来监听发生的数据变化 从而可以refresh()scroll之后 重新计算滚动的高度
type:Array,
default:null
}
},
//vue在mounted()这个生命周期钩子里面加载dom到页面上 一般在这个钩子里面还可以初始化插件 以及操作dom
//要写个定时器,,因为一般数据的请求是异步的 那么异步的数据请求和同样也是异步的mounted()的顺序是什么呢？
//可能是mounted()先执行 那么就会在数据更新之前将dom挂载了 这样会产生虚拟dom
//所以我们要保证dom的挂载是在数据更新之后 所以使用setTimeout() 或者是this.$nextTick
//可以用nextTick 将回调延迟到下次dom更新循环之后执行 在修改数据之后立即使用它，然后等待dom更新 //浏览器渲染一般是17ms 这里延迟到20ms
mounted(){
setTimeout(()=>{
this._initScroll();
//better-scroll的渲染原理是
//根据初始化的时机 或者调用refresh()的时机的那个时候的scroll的父元素的高度和子元素的高度之差去做一个计算
//计算出他可以滚动的位置 所以我们去实例化或者refresh这个scroll的时候 一定要保证 这个dom是已经渲染好的 我们能正确计算到高度的
//所以我们在这里一定要保证我们能计算到正确的高度 因此我们要判断一下 此时dom有没有渲染好 在recommend.vue组件中确认
},20)
},
methods:{
_initScroll(){
//在这里先判断一下this.$refs.wrapper是不是undefined
//如果是undefined 那么BScroll类由于第一个参数为undefined会报错
if(!this.$refs.wrapper){
return
}
this.scroll=new BScroll(this.$refs.wrapper,{
probeType:this.probeType,
click:this.click
})
},
enable(){
this.scroll&&this.scroll.enable()
},
disable(){
this.scroll&&this.scroll.disable()
},
refresh(){
this.scroll&&this.scroll.refresh()
}
},
//监控data的变化 如果data变化了 刷新scroll
watch:{
data(){
setTimeout(()=>{
//这里也是操作dom 只要涉及到操作dom就需要延迟
this.refresh()
},20)
}
}
}
</script>
<style lang="stylus" scoped>
</style>
完成以上这些操作 scroll组件已经初始化了 但是并不能滚动 这是因为 我们初始化这个scroll插件的时机是在scroll.vue组件中的mounted()里面初始化到的 然而我的scroll插件里面的数据是动态渲染拿到的 也就是一个异步操作 即mounted()挂载的前提是 也可以说是实例化或者是refresh()这个插件的前提是 动态获取到数据之后 将dom撑开了之后 能够计算到滚动的高度差之后 在挂载到页面 然后此时我们重新计算scroll 然后调用this.refresh()
才能让scroll正确的滚动
那么我们在recommend.vue中就要确保一下有数据 或者是直接父传子一个data属性 如果recommend.vue中的数据变化了 就会触发scroll.vue中的高度改变
<template>
<div class="recommend">
<!-- 这里的data可以看成是父传子的属性 即<scroll>组件中的props属性下的data
当这里的data改变了的话 scroll组件的data也会改变 因为监听(watch)了data 所以data改变之后就会刷新scroll
即重新计算滚动的高度等等
如果这里先没有传一个data过去 那么我们可能在初始化scroll组件里面的时候可能拿不到数据 如果没有数据
那么scroll组件可能认为不需要滚动
-->
<scroll class="recommend-content" :data="discList" ref="scroll">
<!-- //scroll插件作用于他的第一个子元素 -->
<!-- 局部轮播的父级 -->
<div>
<!-- 注意这里要写当轮播图的数据都拿到了之后 即slider.vue组件里面的mounted()方法能执行成功之后
执行下面操作
-->
<!-- 因为我们的recommend是通过异步拿到的 可能会有延时 但是如果不加上v-if的话 我们可能在没有拿到数据的情况下就
把插槽插入进去了 那么slider.vue里面的mounted()也就执行了
-->
<div class="slider-wrapper" v-if="recommend.length">
<slider>
<!-- 填写插槽 -->
<div v-for="(item,index) in recommend" :key="index">
<a :href="item.linkUrl">
<img :src="item.picUrl" @load="loadImage" class="needsclick">
</a>
</div>
</slider>
</div>
<div class="recommend-list">
<h1 class="list-title">热门歌单推荐</h1>
<div class="mod-playlist">
<ul class="playlist-list">
<li v-for="(item,index) in discList" :key="index" class="playlist-item">
<div class="playlist-item-box">
<div class="playlist-cover mod-cover">
<a href="#">
<img v-lazy="item.imgurl" class="pic">
</a>
</div>
<h4 class="playlist-title">
<span class="playlist-title-txt">{{item.dissname}}</span>
</h4>
<div class="playlist-author">
<a href="#">{{item.creator.name}}</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</scroll>
</div>
</template>
