当前位置：首页 > VUE

vue 异步分页实现

2026-01-18 03:30:42VUE

异步分页实现方法

在Vue中实现异步分页通常涉及与后端API的交互，前端需要处理分页逻辑和数据加载。以下是常见的实现方式：

使用axios获取分页数据

通过axios与后端API通信，获取分页数据并更新组件状态：

vue 异步分页实现

data() {
  return {
    items: [],
    currentPage: 1,
    totalPages: 0,
    isLoading: false
  }
},
methods: {
  async fetchItems() {
    this.isLoading = true;
    try {
      const response = await axios.get('/api/items', {
        params: {
          page: this.currentPage,
          per_page: 10
        }
      });
      this.items = response.data.data;
      this.totalPages = response.data.meta.last_page;
    } catch (error) {
      console.error(error);
    } finally {
      this.isLoading = false;
    }
  }
},
created() {
  this.fetchItems();
}

实现分页组件

可以创建一个分页组件或使用现有UI库的分页组件：

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

    <div class="pagination">
      <button 
        @click="changePage(currentPage - 1)" 
        :disabled="currentPage === 1"
      >
        上一页
      </button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button 
        @click="changePage(currentPage + 1)" 
        :disabled="currentPage === totalPages"
      >
        下一页
      </button>
    </div>
  </div>
</template>

处理页码变化

当用户点击分页按钮时，更新当前页码并重新获取数据：

vue 异步分页实现

methods: {
  changePage(page) {
    if (page > 0 && page <= this.totalPages) {
      this.currentPage = page;
      this.fetchItems();
    }
  }
}

使用无限滚动

对于移动端或需要无限加载的场景，可以使用Intersection Observer API实现无限滚动：

data() {
  return {
    observer: null,
    loadingMore: false,
    hasMore: true
  }
},
mounted() {
  this.observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting && this.hasMore && !this.loadingMore) {
      this.loadMore();
    }
  });
  this.observer.observe(this.$refs.loadMoreTrigger);
},
methods: {
  async loadMore() {
    this.loadingMore = true;
    this.currentPage++;
    try {
      const response = await axios.get('/api/items', {
        params: {
          page: this.currentPage,
          per_page: 10
        }
      });
      this.items = [...this.items, ...response.data.data];
      this.hasMore = this.currentPage < response.data.meta.last_page;
    } catch (error) {
      console.error(error);
      this.currentPage--;
    } finally {
      this.loadingMore = false;
    }
  }
}

使用第三方库

可以借助现有库简化实现，如vue-infinite-loading：

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

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

export default {
  components: { InfiniteLoading },
  methods: {
    async loadMore($state) {
      try {
        const response = await axios.get('/api/items', {
          params: {
            page: this.currentPage + 1,
            per_page: 10
          }
        });

        if (response.data.data.length) {
          this.items = [...this.items, ...response.data.data];
          this.currentPage++;
          $state.loaded();
        } else {
          $state.complete();
        }
      } catch (error) {
        $state.error();
      }
    }
  }
}
</script>