vue 滚到可视区加载内容

逻辑思路：
1、默认没在可视区的模块隐藏，当上一块接口请求完之后，下一块再显示但不走请求，当滚动到可视区再走请求
如果接口请求过了，就标记一下，不会重复走第二遍，当所有模块走完之后，移出监听滚动事件
自定义指令方法：

import Vue from 'vue'
Vue.directive('animate', {
  inserted: function (el, binding) {
    // console.log('el, binding ======>>>>>>>>> ', el, binding);
    binding.loadNextScreen = () => {
      el.style.padding = '3px 0px';
      const { top } = el.getBoundingClientRect();
      const h =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 处理可视区域内的数据请求
      if (top < h) {
        if (binding.value.length > 1) {
          binding.value[0](binding.value[1]);
        } else {
          binding.value();
        }
        if (binding.loadNextScreen) {
          window.removeEventListener('scroll', binding.loadNextScreen);
        }
      }
    };
    window.addEventListener('scroll', binding.loadNextScreen);
    binding.loadNextScreen();
  },
  unbind: function (el, binding) {
    if (binding.loadNextScreen) {
      window.removeEventListener('scroll', binding.loadNextScreen);
    }
  },
});

image.png

image.png

image.png