当前位置：首页 > VUE

vue实现分页加载

2026-01-17 22:14:43VUE

Vue 分页加载的实现方法

基础分页实现（后端分页）

安装依赖（如使用axios）：

npm install axios

示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>当前页：{{ currentPage }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      pageSize: 10,
      totalItems: 0
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize);
    }
  },
  methods: {
    fetchData() {
      axios.get(`/api/items?page=${this.currentPage}&size=${this.pageSize}`)
        .then(response => {
          this.items = response.data.items;
          this.totalItems = response.data.total;
        });
    },
    nextPage() {
      this.currentPage++;
      this.fetchData();
    },
    prevPage() {
      this.currentPage--;
      this.fetchData();
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

无限滚动分页（前端分页）

示例代码：

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div v-for="item in visibleItems" :key="item.id">
      {{ item.name }}
    </div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allItems: [],
      visibleItems: [],
      currentIndex: 0,
      chunkSize: 20,
      loading: false
    };
  },
  methods: {
    loadMore() {
      this.loading = true;
      // 模拟异步加载
      setTimeout(() => {
        const newItems = this.allItems.slice(
          this.currentIndex,
          this.currentIndex + this.chunkSize
        );
        this.visibleItems = [...this.visibleItems, ...newItems];
        this.currentIndex += this.chunkSize;
        this.loading = false;
      }, 500);
    },
    handleScroll(event) {
      const container = event.target;
      const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
      if (scrollBottom < 50 && !this.loading) {
        this.loadMore();
      }
    }
  },
  created() {
    // 模拟数据
    for (let i = 0; i < 1000; i++) {
      this.allItems.push({ id: i, name: `项目 ${i}` });
    }
    this.loadMore();
  }
};
</script>

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

使用第三方库（如vue-infinite-loading）

安装：

npm install vue-infinite-loading

示例代码：

vue实现分页加载

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <InfiniteLoading @infinite="loadMore" />
  </div>
</template>

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

export default {
  components: { InfiniteLoading },
  data() {
    return {
      items: [],
      page: 1,
      hasMore: true
    };
  },
  methods: {
    loadMore($state) {
      axios.get(`/api/items?page=${this.page}`)
        .then(({ data }) => {
          if (data.items.length) {
            this.items.push(...data.items);
            this.page++;
            $state.loaded();
          } else {
            this.hasMore = false;
            $state.complete();
          }
        });
    }
  }
};
</script>