Vue移动端 自定义下拉刷新事件 + 防抖

/**
 * 函数防抖
 */
export function debounce(fn, delay) {
  // 记录上一次的延时器
  var timer = null;
  var delay = delay || 200;
  return function () {
    var args = arguments;
    var that = this;
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(that, args)
    }, delay);
  }
}


/**
 * @desc 下拉刷新
 * @param {string} el
 * @param {function} callback
 * @param {number} bottomheight
 *
 */
export const DropDownRefresh = (el, callback, bottomheight = 20) => {
  let ele = document.querySelector(el)
  function getScrollTop() {
    let scrollTop = ele.scrollTop;
    return scrollTop;
  }

  //获取可视范围的高度
  function getClientHeight() {
    var clientHeight = ele.clientHeight;
    return clientHeight;
  }
  //获取文档高度
  function getScrollHeight() {
    var eleHeight = ele.scrollHeight;
    return eleHeight;
  }


  ele.onscroll = debounce(() => {
    getScrollTop();
    getClientHeight();
    getScrollHeight();
    if (getScrollTop() + getClientHeight() > getScrollHeight() - bottomheight ) {
      callback()
    }

  }, 300)
}

调用

created() {
	//挂载事件
    this.$on("hook:mounted", () => {
      untils.DropDownRefresh(".content", () => {
        console.log('刷新')
      });
    });
    //销毁事件
    this.$on("hook:destroyed", () => {
      document.querySelector(".content").onscroll = null;
    });
  }