当前位置：首页 > VUE

vue实现流加载

2026-01-19 00:00:46VUE

Vue 实现流加载（无限滚动）的方法

流加载（无限滚动）是一种常见的网页优化技术，通过动态加载数据提升用户体验。以下是几种 Vue 实现流加载的方式：

使用 `v-infinite-scroll` 指令

Element UI 提供了 v-infinite-scroll 指令，可以轻松实现无限滚动。

安装 Element UI：

npm install element-ui

示例代码：

vue实现流加载

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      busy: false,
      page: 1
    }
  },
  methods: {
    loadMore() {
      this.busy = true
      // 模拟异步加载数据
      setTimeout(() => {
        const newItems = Array(10).fill().map((_, i) => ({
          id: this.items.length + i,
          content: `Item ${this.items.length + i}`
        }))
        this.items.push(...newItems)
        this.page++
        this.busy = false
      }, 1000)
    }
  }
}
</script>

使用 Intersection Observer API

原生 JavaScript 的 Intersection Observer API 可以检测元素是否进入视口。

示例代码：

vue实现流加载

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div ref="loader" style="height: 20px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      observer: null,
      page: 1
    }
  },
  mounted() {
    this.observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.loadMore()
      }
    })
    this.observer.observe(this.$refs.loader)
    this.loadMore()
  },
  beforeDestroy() {
    this.observer.disconnect()
  },
  methods: {
    loadMore() {
      const newItems = Array(10).fill().map((_, i) => ({
        id: this.items.length + i,
        content: `Item ${this.items.length + i}`
      }))
      this.items.push(...newItems)
      this.page++
    }
  }
}
</script>

使用第三方库 vue-infinite-loading

vue-infinite-loading 是一个专门用于无限滚动的 Vue 插件。

安装：

npm install vue-infinite-loading

示例代码：

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

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

export default {
  components: {
    InfiniteLoading
  },
  data() {
    return {
      items: [],
      page: 1
    }
  },
  methods: {
    loadMore($state) {
      setTimeout(() => {
        const newItems = Array(10).fill().map((_, i) => ({
          id: this.items.length + i,
          content: `Item ${this.items.length + i}`
        }))
        this.items.push(...newItems)
        $state.loaded()
        if (this.page >= 5) {
          $state.complete()
        }
        this.page++
      }, 1000)
    }
  }
}
</script>