vue自动无限滚动列表

Vue自动无限滚动列表可以通过监听`scroll`事件和`offsetHeight`、`scrollTop`和`scrollHeight`属性的变化，来动态加载新数据。

具体思路如下：

1. 在列表容器上添加`scroll`事件监听。

2. 监听到滚动事件后，判断当前滚动位置是否已经接近底部（例如，滚动位置到达列表高度的80%），如果接近底部，则加载新的数据。

3. 在加载新数据时，将新数据添加到列表的末尾，并更新列表容器的高度。

下面是一个简单的实现例子：

<template>
  <div ref="listContainer" class="list-container" @scroll="handleScroll">
    <div v-for="(item, index) in items" :key="index">{{ item }}</div>
    <div v-if="loading" class="loading">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1,
      pageSize: 10
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    handleScroll() {
      const container = this.$refs.listContainer;
      const { offsetHeight, scrollTop, scrollHeight } = container;
      const threshold = offsetHeight * 0.8;

      if (scrollTop + threshold > scrollHeight && !this.loading) {
        this.loadData();
      }
    },
    async loadData() {
      this.loading = true;
      const data = await this.fetchData(this.page, this.pageSize);
      this.items = [...this.items, ...data];
      this.page++;
      this.loading = false;

      // 更新列表容器的高度，确保滚动能够继续触发加载新数据的逻辑
      this.$nextTick(() => {
        const container = this.$refs.listContainer;
        container.style.height = `${container.scrollHeight}px`;
      });
    },
    fetchData(page, pageSize) {
      // 异步获取新数据的逻辑
      // 返回一个Promise对象，resolve时返回新的数据
    }
  }
};
</script>

在这个例子中，我们定义了`handleScroll`函数来处理滚动事件。在函数中，我们通过`this.$refs.listContainer`访问到列表容器，并获取到`offsetHeight`、`scrollTop`和`scrollHeight`属性的值。然后，我们判断当前滚动位置是否已经接近底部（接近底部的阈值为列表高度的80%），如果接近底部并且没有正在加载数据，则调用`loadData`方法加载新的数据。

在`loadData`方法中，我们首先将`loading`属性设置为`true`，表示正在加载数据。然后，我们调用`fetchData`方法异步获取新数据，并将新数据添加到列表的末尾。接着，我们更新`page`属性的值，表示已经加载了一页数据。最后，我们将`loading`属性设置为`false`，表示数据加载完成。

在加载新数据时，我们还需要更新列表容器的高度，确保滚动能够继续触发加载新数据的逻辑。这里我们使用了`this.$nextTick`方法，在DOM更新后再执行更新高度的逻辑。