当前位置：首页 > VUE

vue实现无限滚动加载

2026-01-21 00:43:53VUE

实现无限滚动加载的方法

无限滚动加载是一种常见的优化长列表渲染的技术，通过监听滚动事件动态加载数据，避免一次性渲染大量DOM节点。以下是Vue中的几种实现方式：

使用IntersectionObserver API

IntersectionObserver是现代浏览器提供的性能更好的滚动监听方案，相比传统scroll事件性能更优：

<template>
  <div class="scroll-container">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div ref="loader" class="loader">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      isLoading: false
    }
  },
  mounted() {
    this.initObserver()
    this.loadItems()
  },
  methods: {
    initObserver() {
      const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && !this.isLoading) {
          this.loadMore()
        }
      })
      observer.observe(this.$refs.loader)
    },
    async loadItems() {
      this.isLoading = true
      const newItems = await fetchData(this.page)
      this.items = [...this.items, ...newItems]
      this.isLoading = false
    },
    loadMore() {
      this.page++
      this.loadItems()
    }
  }
}
</script>

使用传统scroll事件

对于需要兼容旧浏览器的场景，可以使用scroll事件实现：

vue实现无限滚动加载

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

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      isLoading: false,
      scrollThreshold: 100
    }
  },
  mounted() {
    this.loadItems()
  },
  methods: {
    handleScroll() {
      const container = this.$refs.container
      const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight

      if (scrollBottom < this.scrollThreshold && !this.isLoading) {
        this.loadMore()
      }
    },
    async loadItems() {
      this.isLoading = true
      const newItems = await fetchData(this.page)
      this.items = [...this.items, ...newItems]
      this.isLoading = false
    },
    loadMore() {
      this.page++
      this.loadItems()
    }
  }
}
</script>

使用第三方库

对于复杂场景，可以考虑使用专门的无尽滚动库：

安装vue-infinite-loading：
```
npm install vue-infinite-loading
```

基本用法：


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

import InfiniteLoading from 'vue-infinite-loading'

export default { components: { InfiniteLoading }, data() { return { items: [], page: 1 } }, methods: { async loadMore($state) { try { const newItems = await fetchData(this.page) if (newItems.length) { this.items.push(...newItems) this.page++ $state.loaded() } else { $state.complete() } } catch (error) { $state.error() } } } }

```