vue自定义指令触底加载

当我们是用某个div盒子滚动时候，又想在即将触底加载数据列表时通常需要监听滚动事件并计算是否滚动到底部，进行请求下一页数据。
指令代码如下：

template绑定指令

<template>
	 <!-- v-scroll使用指令，传递需要触发调用的函数getList   注意这里div要是一个滚动区域。 -->
	<div v-scroll="getList"></div>

</template>

js定义vue指令

//vue单页面自定义指令，定义scroll指令 
directives: {
    scroll: {
      bind(el, binding) {
        const SELECTWRAP_DOM = el;
        SELECTWRAP_DOM.addEventListener("scroll", function() {
          const condition =
          	// -30是为了即将触底就开始获取数据。
            SELECTWRAP_DOM.scrollHeight - 30 - SELECTWRAP_DOM.scrollTop <=
            SELECTWRAP_DOM.clientHeight;

          if (condition) {
          	//这里做节流处理，不然在滚动的过程中会频繁触发触底加载下一页。
            throttle(binding.value);
          }
        });

		//节流api
        let timer;
        let flag;
        /**
         * 节流原理：在一定时间内，只能触发一次
         *
         * @param {Function} func 要执行的回调函数
         * @param {Number} wait 延时的时间
         * @param {Boolean} immediate 是否立即执行
         * @return null
         */
        function throttle(func, wait = 500, immediate = true) {
          if (immediate) {
            if (!flag) {
              flag = true;
              // 如果是立即执行，则在wait毫秒内开始时执行
              typeof func === "function" && func();
              timer = setTimeout(() => {
                flag = false;
              }, wait);
            }
          } else if (!flag) {
            flag = true;
            // 如果是非立即执行，则在wait毫秒内的结束处执行
            timer = setTimeout(() => {
              flag = false;
              typeof func === "function" && func();
            }, wait);
          }
        }
      },
    },
  },