Web网页实现上拉加载分页

1. 创建 IntersectionObserver 实例

const observer = new IntersectionObserver(
  async ([entry]) => {
    if (entry.isIntersecting) {
      loading.value = true;
      await getList();
      loading.value = false;
    }
    console.log("触发");
  },
  {
    root: null, // 监听整个视口
    rootMargin: '0px 0px 200px 0px', // 提前200px触发加载
    threshold: 0.1, // 当10%的marker可见时触发
  }
);

解释：

• IntersectionObserver：这是一个构造函数，用于创建一个新的观察者实例。它可以异步监测一个或多个目标元素与其祖先元素或视口的交叉状态。

• 回调函数：当观察的元素进入或离开视口时，回调函数会被调用。这里的回调函数接收一个数组 entries，每个元素都是一个 IntersectionObserverEntry 对象，包含有关交叉状态的信息。

• entry.isIntersecting：这是一个布尔值，指示目标元素是否与视口相交。如果为 true，表示元素在视口中。

• loading.value：这是一个响应式变量，表示当前是否正在加载数据。设置为 true 表示开始加载，false 表示加载完成。

• await getList()：这是一个异步函数调用，通常用于从服务器获取数据。加载完成后，设置 loading.value 为 false。

• 配置对象：

• root：指定用于计算交叉的视口。null 表示使用浏览器的视口。

• rootMargin：这是一个 CSS 字符串，表示视口的边距。这里设置为 0px 0px 200px 0px，意味着在元素距离视口底部 200 像素时就会触发加载。

• threshold：这是一个数字或数组，表示触发回调的交叉比例。0.1 表示当目标元素的 10% 可见时触发。

2. 滚动加载

const createObserver = () => {
  if (!loadMore.value) {
    console.log(loadMore.value);
    return;
  }
  console.log("loadMore.value)", loadMore.value);
  loadMore.value.forEach((item) => {
    observer.observe(item);
  });
};

解释：

• createObserver：这是一个函数，用于开始观察目标元素。合适时机调用该方法

• if (!loadMore.value)：检查 loadMore.value 是否存在。如果不存在，表示没有更多的元素可供观察，直接返回。

• loadMore.value.forEach((item) => { observer.observe(item); })：遍历 loadMore.value 中的每个元素，并调用 observer.observe(item) 来开始观察这些元素。

这段代码的主要功能是使用 Intersection Observer API 来实现滚动加载。当用户滚动到页面底部（或接近底部）时，触发加载更多内容的操作。通过设置 rootMargin 和 threshold，可以灵活控制何时触发加载。