vue实现页面加载更多

Vue 实现页面加载更多功能

使用滚动事件监听

在 Vue 中实现加载更多功能，可以通过监听滚动事件来判断是否滚动到底部。当用户滚动到页面底部时，触发加载更多数据的逻辑。

<template>
  <div class="container" @scroll="handleScroll">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div v-if="loading">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1,
      hasMore: true,
    };
  },
  methods: {
    handleScroll(event) {
      const container = event.target;
      const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
      if (scrollBottom < 50 && !this.loading && this.hasMore) {
        this.loadMore();
      }
    },
    async loadMore() {
      this.loading = true;
      const newItems = await this.fetchData(this.page);
      this.items = [...this.items, ...newItems];
      this.page += 1;
      this.hasMore = newItems.length > 0;
      this.loading = false;
    },
    fetchData(page) {
      // 模拟 API 调用
      return new Promise(resolve => {
        setTimeout(() => {
          const newItems = Array.from({ length: 10 }, (_, i) => ({
            id: page * 10 + i,
            content: `Item ${page * 10 + i}`,
          }));
          resolve(newItems);
        }, 1000);
      });
    },
  },
  mounted() {
    this.loadMore();
  },
};
</script>

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

使用 Intersection Observer API

Intersection Observer API 提供了一种更高效的方式来监听元素是否进入视口，适合实现无限滚动或加载更多功能。

<template>
  <div class="container">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div ref="loader" v-if="hasMore">
      <span v-if="loading">Loading...</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1,
      hasMore: true,
    };
  },
  methods: {
    async loadMore() {
      this.loading = true;
      const newItems = await this.fetchData(this.page);
      this.items = [...this.items, ...newItems];
      this.page += 1;
      this.hasMore = newItems.length > 0;
      this.loading = false;
    },
    fetchData(page) {
      // 模拟 API 调用
      return new Promise(resolve => {
        setTimeout(() => {
          const newItems = Array.from({ length: 10 }, (_, i) => ({
            id: page * 10 + i,
            content: `Item ${page * 10 + i}`,
          }));
          resolve(newItems);
        }, 1000);
      });
    },
  },
  mounted() {
    this.loadMore();
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !this.loading && this.hasMore) {
        this.loadMore();
      }
    });
    observer.observe(this.$refs.loader);
  },
};
</script>

使用第三方库

如果需要更复杂的功能，可以考虑使用第三方库如 vue-infinite-loading 或 vue-scroll-loader。

<template>
  <div class="container">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <InfiniteLoading @infinite="loadMore" />
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';

export default {
  components: {
    InfiniteLoading,
  },
  data() {
    return {
      items: [],
      page: 1,
    };
  },
  methods: {
    async loadMore($state) {
      const newItems = await this.fetchData(this.page);
      if (newItems.length) {
        this.items = [...this.items, ...newItems];
        this.page += 1;
        $state.loaded();
      } else {
        $state.complete();
      }
    },
    fetchData(page) {
      // 模拟 API 调用
      return new Promise(resolve => {
        setTimeout(() => {
          const newItems = Array.from({ length: 10 }, (_, i) => ({
            id: page * 10 + i,
            content: `Item ${page * 10 + i}`,
          }));
          resolve(newItems);
        }, 1000);
      });
    },
  },
  mounted() {
    this.loadMore();
  },
};
</script>

注意事项

• 确保在加载数据时显示加载状态，避免重复请求。
• 在组件销毁时，移除滚动事件监听器或 Intersection Observer，防止内存泄漏。
• 根据实际需求调整触发加载更多的阈值（如距离底部多少像素时触发）。