逻辑思路：
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
