Vue 2写一个滚动加载数据每次只加载6条

好的，可以给你一个简单的实现思路：

1. 在 Vue 组件中创建一个列表数组，用来存储加载的数据。
2. 在该组件的 mounted 钩子函数中，绑定滚动事件，当滚动到底部时触发一个方法。
3. 在该方法中，判断是否还有数据需要加载，如果有，则通过接口请求数据。
4. 将请求回来的数据 push 到列表数组中，同时更新一个变量来标记是否还有更多数据需要加载。
5. 在模板中使用 v-for 渲染列表数组，同时在 v-if 中判断是否还有更多数据，如果有则显示一个“加载中”的提示。

以下是一个简单的示例代码，你可以根据实际需求进行修改：

<template>
  <div class="scroll-list" ref="scrollList" @scroll="handleScroll">
    <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    <div v-if="loading">加载中...</div>
    <div v-if="!loading && !hasMore">没有更多了</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      hasMore: true,
      page: 1,
      pageSize: 6
    };
  },
  mounted() {
    this.handleScroll();
  },
  methods: {
    handleScroll() {
      const scrollList = this.$refs.scrollList;
      if (
        scrollList.scrollTop + scrollList.clientHeight >=
        scrollList.scrollHeight
      ) {
        this.loadMore();
      }
    },
    async loadMore() {
      if (this.loading || !this.hasMore) return;
      this.loading = true;
      const res = await fetch(`/api/data?page=${this.page}&pageSize=${this.pageSize}`);
      const data = await res.json();
      this.loading = false;
      if (data.length) {
        this.list.push(...data);
        this.page++;
      } else {
        this.hasMore = false;
      }
    }
  }
};
</script>

在这个示例代码中，我们通过一个简单的 API `/api/data` 来模拟请求数据的过程，每次请求返回的数据条数为 pageSize（即 6 条），直到请求的数据为空为止。你可以根据实际情况来修改这个 API。