vue_js+上拉加载更多

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      allItemsLoaded: false,
      loading: false,
      page: 1,
      limit: 20
    };
  },
  mounted() {
    this.loadMore();
  },
  methods: {
    handleScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      if (scrollTop + clientHeight >= scrollHeight - 5 && !this.loading && !this.allItemsLoaded) {
        this.loadMore();
      }
    },
    async loadMore() {
      if (this.loading) return;
      this.loading = true;
      // 模拟异步请求数据
      const newItems = await this.fetchData(this.page, this.limit);
      if (newItems.length === 0) {
        this.allItemsLoaded = true;
      } else {
        this.items = [...this.items, ...newItems];
        this.page += 1;
      }
      this.loading = false;
    },
    fetchData(page, limit) {
      // 这里应该是实际的API调用
      return new Promise(resolve => {
        setTimeout(() => {
          const data = Array.from({ length: limit }, (_, i) => ({
            id: (page - 1) * limit + i,
            text: `Item ${(page - 1) * limit + i}`
          }));
          resolve(data);
        }, 1000);
      });
    }
  }
};
</script>

<style>
.scroll-container {
  height: 400px;
  overflow-y: auto;
}
</style>