js手指滑动加载更多文章

<template>
  <div class="article-list" @scroll="handleScroll">
    <div v-for="article in articles" :key="article.id" class="article-item">
      {{ article.title }}
    </div>
    <div v-if="loading" class="loading-indicator">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: [],
      loading: false,
      allLoaded: false,
      page: 1,
      limit: 10
    };
  },
  methods: {
    async fetchArticles() {
      if (this.allLoaded) return;
      this.loading = true;
      try {
        const response = await fetch(`/api/articles?page=${this.page}&limit=${this.limit}`);
        const newArticles = await response.json();
        if (newArticles.length === 0) {
          this.allLoaded = true;
        } else {
          this.articles = [...this.articles, ...newArticles];
          this.page++;
        }
      } catch (error) {
        console.error('Error fetching articles:', error);
      } finally {
        this.loading = false;
      }
    },
    handleScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      if (scrollTop + clientHeight >= scrollHeight - 50 && !this.loading) {
        this.fetchArticles();
      }
    }
  },
  mounted() {
    this.fetchArticles();
  }
};
</script>

<style>
.article-list {
  height: 400px;
  overflow-y: auto;
}
.loading-indicator {
  text-align: center;
  padding: 10px;
}
</style>