当前位置：首页 > VUE

vue实现分页累加

2026-01-19 08:13:29VUE

Vue实现分页累加

基础思路

分页累加通常指滚动加载更多数据时，保留已加载内容并追加新数据。Vue中可通过监听滚动事件或结合第三方库实现。

核心代码实现

数据定义

data() {
  return {
    items: [],       // 已加载数据
    page: 1,         // 当前页码
    isLoading: false, // 加载状态
    hasMore: true    // 是否还有更多数据
  }
}

加载方法

methods: {
  loadMore() {
    if (this.isLoading || !this.hasMore) return

    this.isLoading = true
    fetch(`/api/data?page=${this.page}`)
      .then(res => res.json())
      .then(newItems => {
        this.items = [...this.items, ...newItems]
        this.page++
        this.hasMore = newItems.length > 0
      })
      .finally(() => this.isLoading = false)
  }
}

滚动监听实现

模板部分

<div class="scroll-container" @scroll="handleScroll">
  <div v-for="item in items" :key="item.id">{{ item.content }}</div>
  <div v-if="isLoading">加载中...</div>
</div>

滚动处理方法

handleScroll(e) {
  const { scrollTop, clientHeight, scrollHeight } = e.target
  const bottomReached = scrollTop + clientHeight >= scrollHeight - 100

  if (bottomReached) this.loadMore()
}

使用IntersectionObserver优化

观察器实现

mounted() {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) this.loadMore()
  })

  this.$nextTick(() => {
    observer.observe(this.$refs.loadingTrigger)
  })
}

模板对应修改

<div v-for="item in items">{{ item.text }}</div>
<div ref="loadingTrigger" v-if="!isLoading && hasMore"></div>
<div v-if="isLoading">加载中...</div>

注意事项

节流处理：滚动事件建议添加节流函数
错误处理：网络请求需添加catch处理
组件销毁时移除观察者
移动端需考虑touch事件兼容性

完整示例组件

export default {
  data() {
    return {
      items: [],
      page: 1,
      isLoading: false,
      hasMore: true
    }
  },
  methods: {
    async loadMore() {
      if (this.isLoading || !this.hasMore) return

      this.isLoading = true
      try {
        const res = await fetch(`/api/data?page=${this.page}`)
        const newItems = await res.json()
        this.items.push(...newItems)
        this.hasMore = newItems.length > 0
        this.page++
      } finally {
        this.isLoading = false
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}

vue实现分页累加