better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。
注意事项
- better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
- 外盒子设置固定宽或高和属性：overflow: hidden;
安装
npm install better-scroll --save
因为这个插件在很多地方都会用到，同时有些配置是需要再手动添加的，所有我们要基于这个插件的基础上再去手动封装一个组件。
在components文件夹中新建一个scroll.vue文件
<template>
<div class="scroll" ref="scrollWrapper">
<!-- 插槽用来放置我们的数据 -->
<slot></slot>
</div>
</template>
<script>
import BScroll from "better-scroll";
export default {
name: "scroll",
data() {
return {};
},
props:{
data:{
type:Array,
default(){
return []
}
}
},
watch:{
data(val){
//当刷新队列的时候去不断监听data，刷新调用refresh方法
this.$nextTick(() =>{
this.refresh()
})
}
},
mounted(){
//当组件的所有dom部分渲染更新完成了之后再去调用initScroll方法
this.$nextTick(() =>{
this.initScroll()
})
},
methods: {
initScroll() {
if(!this.$refs.scrollWrapper) return
this.scroll = new BScroll(this.$refs.scrollWrapper,{
//在这个添加一些配置参数
click:true
})
},
refresh(){
//当dom结构更新的时候，调用refresh方法对dom高度进行一个重新计算
this.scroll && this.scroll.refresh()
},
scrollToElement(){
this.scroll && this.scroll.scrollToElement.apply(this.scroll,arguments)
},
scrollTo(){
this.scroll && this.scroll.scrollTo.apply(this.scroll,arguments)
}
}
};
</script>
<style lang="less" scoped>
</style>
接下来在要使用better-scroll的组件中进行操作
1.首先引入
import scroll from "@/components/scroll";
2.注册
components: {
scroll
}
3.使用
<scroll class="page-info-list" :data="formatData">
<songlist :data="formatData" @clickItem="addToPlay"></songlist>
</scroll>
注意：如果scroll标签内包裹的组件，但是数据也是会随时刷新的，:data传递scroll标签包裹元素要用到的数据就可以，这个传递的data的作用就是scroll组件可以监听这个数据，一旦发生变化，会触发自身的refresh事件，重新计算元素的高度。
也就说，当被scroll标签内的元素的数据是静态的，可以不给scroll传递data。
4.给要滚动的盒子添加高度和overflow样式
.page-info-list {
height: calc(100vh - 380px);
overflow: hidden;
}
这样的话，其它部分不需要固定定位，scroll包裹的部分就可以实现在自己内部的滚动了。
