Vue滚动条触底加载

实现 Vue 滚动条触底加载可以采用以下步骤：

1. 在模板中使用 `v-infinite-scroll` 指令监听滚动事件。

2. 在 data 中定义一个变量 `page` 用于记录当前页数，初始值为 1。

3. 在 methods 中定义一个方法 `loadMore`，在该方法中通过发送 API 请求获取更多数据，并将当前页数 `page` 加 1。

4. 在 `v-infinite-scroll` 指令中绑定 `loadMore` 方法，并设置触底距离 `distance` 和加载完成后是否启用 `disabled` 状态。

以下是示例代码：

<template>
  <div class="container" v-infinite-scroll="loadMore" :distance="distance" :disabled="isLoading">
    <div v-for="item in items" :key="item.id">{{ item.title }}</div>
    <div v-if="isLoading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      items: [],
      isLoading: false,
      distance: 100, // 触底距离
    };
  },
  methods: {
    loadMore() {
      if (this.isLoading) return;
      this.isLoading = true;
      axios.get(`/api/data?page=${this.page}`).then((res) => {
        this.items = [...this.items, ...res.data.items];
        this.page++;
        this.isLoading = false;
      });
    },
  },
};
</script>