分页加载时怎么控制数据重复显示？

程序员美蓝提问于 2026-01-29 22:47:35 阅读 81

优化

大家好，我在做无限滚动分页时遇到个怪问题。每次滚动到底部加载新数据时，前几页的数据会突然重复显示，像是被覆盖了又叠加？

我用的是Vue，方法是这样的：items = []存储数据，点击加载更多时调用axios.get('/api/items?page='+pageNum)。尝试过在请求前执行items.splice(0, items.length)，结果导致滚动到第三页时所有数据突然重置…

后来改用items.push(...newItems)，但发现当pageNum=2时数据正常，到pageNum=3又出现重复。控制台打印pageNum显示递增没问题，但返回的数据里page=3居然包含page=1的内容…


methods: {
  loadMore() {
    axios.get(`/api/items?page=${this.pageNum}`)
      .then(res => {
        this.items.push(...res.data.items)
        this.pageNum++
      })
  }
}

后端同事说接口没问题，我是不是在客户端处理数据时哪里漏了边界条件？

分页加载

我来解答赞 10 收藏

反馈

1 条解答

令狐书娟 Lv1

问题出在后端返回的数据里混入了重复内容，而不是前端代码的问题。不过咱们可以从前端优化一下逻辑，避免这种问题影响用户体验。

首先，别再用 items.push(...newItems) 这种直接拼接的方式了。改用一个去重函数处理新数据，效率更高也更安全。比如这样：

methods: {

  loadMore() {

    axios.get(/api/items?page=${this.pageNum})

      .then(res => {

        const newItems = res.data.items.filter(item => !this.items.some(existingItem => existingItem.id === item.id));

        this.items.push(...newItems);

        this.pageNum++;

      })

  }

}

这里用了 filter 和 some 做去重，假设每条数据都有唯一的 id 字段。如果字段名不一样，记得改一下。

另外，建议你跟后端同事确认下接口是否真的没问题，特别是分页逻辑。按理说 page=3 不可能返回 page=1 的内容，除非他们那边缓存或者查询出了问题。

最后提醒一下，无限滚动时最好加上加载状态和防抖处理，不然用户疯狂滚到底部会触发大量请求，对性能很不友好。

2026-01-31 16:44