vue实现分页累加

实现分页累加的基本思路

分页累加通常指在滚动加载或分页请求时，将新数据追加到现有数据列表中，而非替换原有数据。Vue中可通过结合数组操作与分页逻辑实现。

核心代码实现

数据定义

data() {
  return {
    list: [],       // 存储累计的数据
    page: 1,        // 当前页码
    pageSize: 10,   // 每页条数
    isLoading: false // 加载状态
  }
}

请求方法示例

methods: {
  async loadMore() {
    if (this.isLoading) return;

    this.isLoading = true;
    try {
      const res = await api.getList({
        page: this.page,
        pageSize: this.pageSize
      });

      // 累加数据而非替换
      this.list = [...this.list, ...res.data];
      this.page++;
    } finally {
      this.isLoading = false;
    }
  }
}

滚动加载触发

通过监听滚动事件实现自动加载：

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const scrollBottom = document.documentElement.scrollHeight - 
                        window.innerHeight - 
                        window.scrollY;
    if (scrollBottom < 100) {
      this.loadMore();
    }
  }
}

使用第三方库优化

对于复杂场景，可考虑使用专门库：

1. vue-infinite-loading：提供现成的无限滚动组件
2. vue-virtual-scroller：优化大数据量渲染性能

示例安装

npm install vue-infinite-loading

组件使用

<template>
  <InfiniteLoading @infinite="loadMore"/>
</template>

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

export default {
  components: { InfiniteLoading },
  methods: {
    loadMore($state) {
      // 同前文请求逻辑，完成后调用：
      $state.loaded(); // 加载成功
      // 或 $state.complete(); // 无更多数据
    }
  }
}
</script>

性能优化建议

• 使用唯一key优化v-for渲染

  

  <div v-for="item in list" :key="item.id">{{item.content}}</div>

• 大数据量考虑虚拟滚动

  import { RecycleScroller } from 'vue-virtual-scroller';

• 添加防抖避免频繁请求

  import _ from 'lodash';
  export default {
  methods: {
    handleScroll: _.debounce(function() {
      // 滚动逻辑
    }, 200)
  }
  }

边界情况处理

• 无更多数据时禁用加载

  if (res.data.length < this.pageSize) {
  this.isComplete = true;
  return;
  }

• 加载失败重试机制

  catch (error) {
  this.retryCount++;
  if (this.retryCount < 3) {
    setTimeout(this.loadMore, 1000);
  }
  }