封装数据懒加载

PvemiYHL9

已于 2022-09-15 23:07:11 修改

阅读量102

点赞数

文章标签： html javascript 前端

于 2022-09-15 08:56:28 首次发布

本文链接：https://blog.csdn.net/m0_69793485/article/details/126864169

版权


import { useIntersectionObserver } from "@vueuse/core";
import { ref } from "vue";

// 封装通用的数据懒加载api
export const useLazyLoad = (callBack: () => void) => {
  const target = ref(null);
  // 第一个参数是要监听的dom元素
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
      // 如果target的dom元素进入了可视区域 那么就触发回调
    if (isIntersecting) {
      callBack();
        //被监听的dom元素进入了可视区域之后就停止监听
      stop();
    }
  });
    // target表示要监听的dom元素 需要在模板中绑定ref
  return target;
};