基于vue2写的上拉加载

因为我们项目中，还用了swiper。。。很多都是滑动切换的，但是又得上拉加载，所以导致，很多UI框架，我们用了，都有不同的bug出现，没办法，最后写了一个。代码如下（这个因为很多地方会用，所以建议放在components/common下面）：

<template>
    <div class="loadmore">
        <slot></slot>
        <slot name="bottom">
        </slot>
    </div>
</template>

<style>
    .loadmore{
        width:100%;
    }
</style>

<script>
    export default {
        name: 'loadmore',
        props: {
            maxDistance: {
                type: Number,
                default: 0
            },
            autoFill: {
                type: Boolean,
                default: true
            },
            distanceIndex: {
                type: Number,
                default: 2
            },
            bottomPullText: {
                type: String,
                default: '上拉刷新'
            },
            bottomDropText: {
                type: String,
                default: '释放更新'
            },
            bottomLoadingText: {
                type: String,
                default: '加载中...'
            },
            bottomDistance: {
                type: Number,
                default: 70
            },
            bottomMethod: {
                type: Function
            },
            bottomAllLoaded: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                // 最下面出现的div的位移
                translate: 0,
                // 选择滚动事件的监听对象
                scrollEventTarget: null,
                containerFilled: false,
                bottomText: '',
                // class类名
                bottomDropped: false,
                // 获取监听滚动元素的scrollTop
                bottomReached: false,
                // 滑动的方向   down---向下互动；up---向上滑动
                direction: '',
                startY: 0,
                startScrollTop: 0,
                // 实时的clientY位置
                currentY: 0,
                topStatus: '',
                //  上拉加载的状态    ''     pull: 上拉中
                bottomStatus: '',
            };
        },
        watch: {
  
            // 改变当前加载在状态
            bottomStatus(val) {
                this.$emit('bottom-status-change', val);
                switch (val) {
                    case 'pull'<