vue自定义指令v-load-more实现上拉加载

vue通过自定义指令实现loadMore上拉加载，实现方法：

common.js

/**
 * 获取style样式
 */
export const getStyle = (element, attr, NumberMode = 'int') => {
        let target;
        // scrollTop 获取方式不同，没有它不属于style，而且只有document.body才能用
        if (attr === 'scrollTop') {
            target = element.scrollTop;
        } else if (element.currentStyle) {
            target = element.currentStyle[attr];
        } else {
            target = document.defaultView.getComputedStyle(element, null)[attr];
        }
        //在获取 opactiy 时需要获取小数 parseFloat
        return NumberMode == 'float' ? parseFloat(target) : parseInt(target);
    }

mixmin.js

import { getStyle } from './common'
export const loadMore = {
    directives: { 
        'load-more': {
            bind: (el, binding) => { //只调用一次，指令第一次绑定到元素时调用
                let windowHeight = window.screen.height;
                let height;
                let setTop;
                let paddingBottom;
                let marginBottom;
                let requestFram;
                let oldScrollTop;
                let scrollEl;
                let heightEl;
                let scrollType = el.attributes.type && el.attributes.type.value; //获取元素的属性是获取的对象而非数组
                let scrollReduce = 2;
                if (scrollType == 2) {
                    scrollEl = el;
                    heightEl = el.children[0];
                } else {
                    scrollEl = document.body;
                    heightEl = el;
                }

                el.addEventListener('touchstart', () => {
                    height = heightEl.clientHeight;
                    if (scrollType == 2) {
                        height = height
                    }
                    setTop = el.offsetTop;
                    paddingBottom = getStyle(el, 'paddingBottom');
                    marginBottom = getStyle(el, 'marginBottom');
                }, false)

                el.addEventListener('touchmove', () => {
                    loadMore();
                }, false)

                el.addEventListener('touchend', () => {
                    oldScrollTop = scrollEl.scrollTop;
                    moveEnd();
                }, false)

                const moveEnd = () => {
                    requestFram = requestAnimationFrame(() => {
                        if (scrollEl.scrollTop != oldScrollTop) {
                            oldScrollTop = scrollEl.scrollTop;
                            moveEnd()
                        } else {
                            cancelAnimationFrame(requestFram);
                            height = heightEl.clientHeight;
                            loadMore();
                        }
                    })
                }

                const loadMore = () => {
                    if (scrollEl.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom - scrollReduce) {
                        binding.value();
                    }
                }
            }
        }
    }
};

loadMore.vue