vue 滚动加载节流方法

在Vue.js中，可以通过自定义指令来实现滚动加载的节流方法。下面是一个基于Vue.js的滚动加载节流指令：

Vue.directive('scroll-throttle', {
  inserted: function(el, binding) {
    let timer = null;
    const callback = binding.value;
    const delay = binding.arg || 200; // 默认延迟时间为200ms

    el.addEventListener('scroll', function() {
      if (!timer) {
        timer = setTimeout(() => {
          callback();
          timer = null;
        }, delay);
      }
    });
  }
});

在使用时，我们可以在需要滚动加载的元素上添加v-scroll-throttle指令，并绑定一个回调函数。例如：

<template>
  <div v-scroll-throttle="loadMore" class="scrollable">
    <!-- 滚动加载的内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ...
    };
  },
  methods: {
    loadMore() {
      // 执行滚动加载的逻辑
    }
  }
};
</script>

这样，我们就可以实现在滚动时每隔一段时间才执行一次loadMore函数，从而实现滚动加载的节流效果。