VUE 滚动到底部加载更多（附带指令实现方式）

VUE 滚动到底部加载更多（附带指令实现方式）

直接上代码：

    mounted() {  
          window.addEventListener('scroll', this.handleScroll, true);
    },
    destroyed() {
        window.removeEventListener('scroll', this.handleScroll);
    },
     methods: {
        /**
         * [handleScroll description]滚动到底部
         *
         * @param   {[type]}  e  [e description]
         *
         * @return  {[type]}     [return description]
         */
        handleScroll(e) {
            if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
                //在此处放入你的加载更多方法
            }
        },
    }

效果：

2022/8/26更新/
用指令的方式更加方便

Vue.directive('drop-down-loadmore',{
    bind(el, binding) {
        const SELECTWRAP_DOM = el;
        SELECTWRAP_DOM.addEventListener('scroll', function() {
            const condition =
            SELECTWRAP_DOM.scrollHeight - SELECTWRAP_DOM.scrollTop <= SELECTWRAP_DOM.clientHeight;
            if (condition) {
                binding.value();
            }
        });
    }
});