当前位置：首页 > VUE

vue滚动加载实现

2026-02-10 22:25:11VUE

vue滚动加载的实现方法

在Vue中实现滚动加载功能，可以通过监听滚动事件或使用Intersection Observer API来实现。以下是几种常见的实现方式：

监听滚动事件实现滚动加载

通过监听窗口或容器的滚动事件，判断是否滚动到底部来触发加载更多数据。

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

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    handleScroll(e) {
      const container = e.target
      const scrollHeight = container.scrollHeight
      const scrollTop = container.scrollTop
      const clientHeight = container.clientHeight

      if (scrollHeight - scrollTop - clientHeight < 50 && !this.loading) {
        this.loadData()
      }
    },
    loadData() {
      this.loading = true
      // 模拟API请求
      setTimeout(() => {
        const newItems = Array(10).fill(0).map((_, i) => ({
          id: this.items.length + i,
          content: `项目 ${this.items.length + i}`
        }))
        this.items = [...this.items, ...newItems]
        this.page++
        this.loading = false
      }, 1000)
    }
  }
}
</script>

<style>
.scroll-container {
  height: 400px;
  overflow-y: auto;
}
</style>

使用Intersection Observer API

Intersection Observer API提供了一种更高效的方式来观察元素是否进入视口。

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

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1,
      hasMore: true
    }
  },
  mounted() {
    this.loadData()
    this.initObserver()
  },
  methods: {
    initObserver() {
      const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && !this.loading && this.hasMore) {
          this.loadData()
        }
      })
      observer.observe(this.$refs.loader)
    },
    loadData() {
      this.loading = true
      // 模拟API请求
      setTimeout(() => {
        const newItems = Array(10).fill(0).map((_, i) => ({
          id: this.items.length + i,
          content: `项目 ${this.items.length + i}`
        }))
        this.items = [...this.items, ...newItems]
        this.page++
        this.loading = false
        // 模拟没有更多数据的情况
        if (this.page > 5) this.hasMore = false
      }, 1000)
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用专门的Vue无限滚动组件，如vue-infinite-loading：

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

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

export default {
  components: { InfiniteLoading },
  data() {
    return {
      items: [],
      page: 1
    }
  },
  methods: {
    loadData($state) {
      // 模拟API请求
      setTimeout(() => {
        const newItems = Array(10).fill(0).map((_, i) => ({
          id: this.items.length + i,
          content: `项目 ${this.items.length + i}`
        }))
        this.items = [...this.items, ...newItems]
        this.page++

        // 模拟没有更多数据的情况
        if (this.page > 5) {
          $state.complete()
        } else {
          $state.loaded()
        }
      }, 1000)
    }
  }
}
</script>