Vue中如何进行滚动加载与无限滚动

在Vue中实现滚动加载或无限滚动的一种方法是使用IntersectionObserver API。这个API可以监听元素是否进入或离开视口，非常适合无限滚动的场景。

以下是一个简单的例子，展示如何在Vue组件中实现无限滚动：

<template>
  <div>
    <div v-for="item in items" :key="item">{{ item }}</div>
    <div v-intersect="handleIntersect">加载更多...</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [...Array(20).keys()], // 初始的数据项
      nextIndex: 21 // 下一个数据项的索引
    };
  },
  directives: {
    intersect: {
      bind(el, binding) {
        const observer = new IntersectionObserver(entries => {
          if (entries[0].isIntersecting) {
            binding.value();
          }
        });
        observer.observe(el);
      }
    }
  },
  methods: {
    handleIntersect() {
      // 当触发加载更多时，添加更多数据
      for (let i = this.nextIndex; i < this.nextIndex + 20; i++) {
        this.items.push(i);
      }
      this.nextIndex += 20;
    }
  }
};
</script>

在这个例子中，我们定义了一个名为intersect的自定义指令，它使用IntersectionObserver监听元素是否在视口中。当元素进入视口时，触发handleIntersect方法来加载更多数据。数据以数组的形式存储，当需要加载更多内容时，我们将新的数据项追加到现有数组中。这样就形成了无限滚动的效果。