vue3滚动到底部加载

在 Vue3 中，实现页面滚动到底部自动加载（通常称为 Infinite Scroll 或 Load More）的一种常见做法是利用 Intersection Observer API 和 Vue 的响应式系统。Intersection Observer 是一种现代浏览器提供的功能，用于监听元素是否进入或离开视口。

以下是一个简单的步骤概述：

1. 定义一个数据属性，比如 `showMore`，初始化为 `false`，表示是否需要加载更多内容。

data() {
  return {
    showMore: false,
    // 其他数据...
  };
},

2. 创建一个 Intersection Observer 实例，当滚动条接近底部时触发回调函数。在这个函数里检查是否满足加载条件（例如，剩余高度小于某个阈值），然后更新 `showMore` 属性。

mounted() {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting && !this.showMore) {
          this.$refs.loadMoreRef && this.loadMore();
        }
      });
    },
    { threshold: 0.5 } // 设置一个阈值，如50%，当元素进入视野的50%时触发
  );
  
  // 将Intersection Observer添加到可视区域的节点上
  if (this.$refs.loadMoreRef) {
    observer.observe(this.$refs.loadMoreRef);
  }

  window.addEventListener('scroll', () => {
    if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
      observer.checkEntries(); // 检查是否有新的内容进入了视图
    }
  });
},

3. 当 `loadMore` 被调用时，发送请求从服务器获取更多的数据，并在数据加载完成后设置 `showMore` 为 `false` 以防止无限循环加载。

methods: {
  loadMore() {
    if (!this.showMore) {
      this.showMore = true;
      // 发送请求获取更多数据
      this.fetchData().then(() => {
        this.showMore = false; // 加载成功后置回默认状态
      });
    }
  },
  fetchData() {
    // 这里填写实际的网络请求
    // 返回一个新的Promise，一旦数据返回就resolve它
  },
},

4. 在模板中，你可以有一个按钮或者其他元素作为 "Load More" 的提示，其 ref 可供你在组件内部引用。

<div ref="loadMoreRef">...</div>
<button @click="loadMore">加载更多</button>