Vue中使用BetterScroll

1、下载：

npm install @better-scroll/core --save

地址：https://better-scroll.github.io/docs/zh-CN/guide/
用到了下拉，所以下载：

npm install @better-scroll/pull-up --save

2、返回顶部

注：达到临界值的时候，返回顶部显示，没有到隐藏
1）在使用的页面调用组件，页面的写法如下：

<!--
 * @Author: 
 * @Date: 2020-10-18 15:02:55
 * @LastEditors: 
 * @LastEditTime: 2020-10-18 18:18:20
 * @FilePath: /attempt/src/pages/BetterScroll/Index.vue
 * @Description: 
-->
<template>
    <div>
        <scroll class="content" ref="scroll" @scroll="contentScroll">
            <ul>
            	<!-- 这块好li -->
                <li>列表1</li>
                <li>列表2</li>
                。。。。。。
            </ul>
        </scroll>
        <!-- click.native 是监听组件的点击-->
        <BackTop @click.native="backTop" v-show="show" />
    </div>
</template>
<script>
import scroll from "@/components/common/scroll/Scroll.vue";
import BackTop from '@/components/common/backTop/BackTop.vue';
export default {
    components: {
        scroll,
        BackTop
    },
    data(){
        return {
            show:false
        }
    },
    methods: {
        /**
         * 回到顶部，在父里面通过ref取得子组件里面的方法
         * (位置,位置,毫秒（指的是 在多少毫秒返回顶部）)
         */
        backTop() {
            console.log("回到顶部");
            this.$refs.scroll.scrollTo(0, 0, 500);
        },
        //
        contentScroll(position){
            console.log(position.y);
            //打印出来是负的
            this.show = - position.y > 700
        }
    },
}
</script>
<style scoped>
.content {
    height: 100vh;
    background: blueviolet;
    overflow: hidden;
    /* overflow: hidden;
    overflow-y: scroll; */
}
</style>

2）封装BetterScroll的组件（这块是复用的），组件路径src/components/common/scroll/Scroll.vue

<!--
 * @Author: 
 * @Date: 2020-10-18 17:02:23
 * @LastEditors: 
 * @LastEditTime: 2020-10-18 18:13:39
 * @FilePath: /attempt/src/components/common/scroll/Scroll.vue
 * @Description: 
-->
<template>
    <!-- wrapper里面只有一个元素（同时 获取元素的时候，建议用ref），并且 要有固定高度 -->
    <div class="wrapper" ref="bsWrapper">
        <div class="content">
            <!-- 在外面调用的时候，把所有的内容，都插入了进来，确保里面只包裹一个元素 -->
            <slot></slot>
        </div>
    </div>
</template>
<script>
import BScroll from '@better-scroll/core';

//下拉
import Pullup from '@better-scroll/pull-up';
BScroll.use(Pullup)
export default {
    data() {
        return {
            bscroll: null
        }
    },
    // 取元素只能在mounted里（要不然会报null 或者 undefined）
    mounted() {
        // 1、常见BScroll对象
        this.bscroll = new BScroll(this.$refs.bsWrapper, {
            probeType: 3,//这里设置2 和 3的时候，实时监听，设置2的时候，惯性滚动不可以监听，3惯性滚动 也可以监听；0和1 什么都不监听 （这块可以考虑，从外面传入）
            pullUpLoad: true,
            click:true,//这个设置为true的时候，div才可以被点击
            // scrollY: true,
            // pullDownRefresh: true
        })
        // 2、监听
        // 判断下拉距离的（需要用的时候，要传出去）
        this.bscroll.on('scroll', (position) => {
            // console.log(position);
            this.$emit("scroll",position)
        })
        // 到底部（他没有 参数）
        this.bscroll.on('pullingUp', () => {
            console.log("你好");
        })
        // 返回顶部
        this.bscroll.scrollTo(0, 0);
    },
    methods: {
        /**
         * @description: 给一个返回顶部的函数
         */
        scrollTo(x, y, time = 400) {
            this.bscroll.scrollTo(x, y, time);
        }
    },
}
</script>
<style scoped>
.wrapper {
    height: 100%;
    width: 100%;
}
</style>

3）封装一个返回的组件

<template>
    <div class="backTop">
        <button>回到<br />顶部</button>
    </div>
</template>
<script>
export default {

}
</script>
<style scoped>
    .backTop{
        position:fixed;
        bottom:0;
        right:0;
    }
</style>

3、下拉加载更多

1）在页面调用组件

<template>
    <div>
        <scroll class="content" ref="scroll" @scroll="contentScroll" @pullingUp="loadMore">
            <ul>
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
                。。。。。。
            </ul>
        </scroll>
    </div>
</template>
<script>
import scroll from "@/components/common/scroll/Scroll.vue";
export default {
    components: {
        scroll,
    },
    data(){
        return {
            show:false
        }
    },
    methods: {
        // 下拉
        loadMore(){
            console.log("上拉事件");
            this.$refs.scroll.finishPullUp();
        }
    },
}
</script>
<style scoped>
.content {
    height: 100vh;
    background: blueviolet;
    overflow: hidden;
    /* overflow: hidden;
    overflow-y: scroll; */
}
</style>

2）下拉组件的初步封装
注：防抖函数，在一般的情况下 用不到，在加载图片的时候，要使用。

<template>
    <!-- wrapper里面只有一个元素（同时 获取元素的时候，建议用ref），并且 要有固定高度 -->
    <div class="wrapper" ref="bsWrapper">
        <div class="content">
            <!-- 在外面调用的时候，把所有的内容，都插入了进来，确保里面只包裹一个元素 -->
            <slot></slot>
        </div>
    </div>
</template>
<script>
import BScroll from '@better-scroll/core';

//下拉
import Pullup from '@better-scroll/pull-up';
BScroll.use(Pullup)
export default {
    data() {
        return {
            bscroll: null
        }
    },
    // 取元素只能在mounted里（要不然会报null 或者 undefined）
    mounted() {
        // 1、常见BScroll对象
        this.bscroll = new BScroll(this.$refs.bsWrapper, {
            probeType: 3,//这里设置2 和 3的时候，实时监听，设置2的时候，惯性滚动不可以监听，3惯性滚动 也可以监听；0和1 什么都不监听 （这块可以考虑，从外面传入）
            pullUpLoad: true,//这个上拉加载，这里也尽量写成动态的
            click:true,//这个设置为true的时候，div才可以被点击
            // scrollY: true,
            // pullDownRefresh: true
        })
        // 2、监听
        // 判断下拉距离的（需要用的时候，要传出去）
        this.bscroll.on('scroll', (position) => {
            // console.log(position);
            this.$emit("scroll",position)
        })
        // 到底部（他没有 参数）
        this.bscroll.on('pullingUp', () => {
            // console.log("上拉事件");
            this.$emit("pullingUp");
        })
        //拿到 BScroll对象
        console.log(this.bscroll);

    },
    methods: {
        /**
         * @description: 给一个返回顶部的函数
         */
        scrollTo(x, y, time = 400) {
            this.bscroll && this.bscroll.scrollTo(x, y, time);
        },
        /**
         * @description: 这个是下拉下载的，如果在每次下拉完成后，不调用这个函数，他就没办法使用第二次
         */
        finishPullUp(){
            this.bscroll && this.bscroll.finishPullUp();
        },
        /**
         * 但上面的这个 会产生一个bug，所以在数据加载完成，要调用一个函数(重新计算滚动高度)
         * 监听图片加载完成 <img src="" alt="" onLoad="imgLoad" >
         * 
         */
        refresh(){
            let fun = this.bscroll && this.bscroll.refresh();
            this.debounce(fun,500);
        },
        /**
         * 函数防抖
         * fun函数  传函数的时候，不要加括号
         * delay等待多久
         * 
         */
        debounce(fun,delay){
            let time = null;
            // 下面是一个闭包
            return function(...args){
                if(time) clearTimeout(time);
                time = setTimeout(() => {
                    fun.apply(this,args);
                },time);
            }
        }
    },
}
</script>
<style scoped>
.wrapper {
    height: 100%;
    width: 100%;
}
</style>