Vue中使用better-scroll实现滑动效果

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包裹的部分就可以实现在自己内部的滚动了。