当前位置：首页 > VUE

vue实现无线加载

2026-03-09 05:48:30VUE

无限滚动加载的实现方式

无限滚动加载（Infinite Scroll）是常见的长列表优化方案，通过监听滚动事件动态加载数据。Vue中可通过以下方法实现：

使用Intersection Observer API

Intersection Observer是现代浏览器提供的性能更好的API，避免频繁触发scroll事件：

<template>
  <div>
    <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.loadItems()
        }
      })
      observer.observe(this.$refs.loader)
    },
    async loadItems() {
      this.isLoading = true
      const newItems = await fetchData(this.page) // 替换为实际API调用
      this.items = [...this.items, ...newItems]
      this.page++
      this.isLoading = false
    }
  }
}
</script>

传统滚动事件监听

适用于需要兼容旧浏览器的场景：

<template>
  <div @scroll="handleScroll" style="height: 500px; overflow-y: auto;">
    <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
    }
  },
  mounted() {
    this.loadItems()
  },
  methods: {
    handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target
      const isBottom = scrollHeight - (scrollTop + clientHeight) < 50

      if (isBottom && !this.isLoading) {
        this.loadItems()
      }
    },
    async loadItems() {
      this.isLoading = true
      const newItems = await fetchData(this.page) // 替换为实际API调用
      this.items = [...this.items, ...newItems]
      this.page++
      this.isLoading = false
    }
  }
}
</script>

使用第三方库

vue-infinite-loading是专门为Vue设计的无限滚动组件：

安装依赖
```
npm install vue-infinite-loading
```

组件中使用


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

import InfiniteLoading from 'vue-infinite-loading'

export default { components: { InfiniteLoading }, data() { return { items: [], page: 1 } }, methods: { async loadItems($state) { try { const newItems = await fetchData(this.page)

    if (newItems.length) {
      this.items = [...this.items, ...newItems]
      this.page++
      $state.loaded()
    } else {
      $state.complete()
    }
  } catch (error) {
    $state.error()
  }
}

} }

vue实现无线加载