当前位置：首页 > VUE

vue无限滚动实现

2026-01-19 00:54:16VUE

vue无限滚动实现

无限滚动（Infinite Scroll）是一种常见的网页交互方式，当用户滚动到页面底部时自动加载更多内容。在Vue中可以通过以下几种方式实现：

使用第三方库

vue-infinite-scroll是一个流行的Vue无限滚动插件，安装后可以快速实现功能。

安装依赖：

npm install vue-infinite-scroll --save

在组件中使用：

<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
      // 模拟API请求
      setTimeout(() => {
        const newItems = Array(10).fill().map((_, i) => ({
          id: this.items.length + i,
          content: `Item ${this.items.length + i}`
        }))
        this.items = [...this.items, ...newItems]
        this.page++
        this.busy = false
      }, 1000)
    }
  }
}
</script>

原生实现

如果不希望使用第三方库，可以通过监听滚动事件原生实现：

<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.loadMore()
  },
  methods: {
    handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target
      const bottomReached = scrollTop + clientHeight >= scrollHeight - 50
      if (bottomReached && !this.loading) {
        this.loadMore()
      }
    },
    async loadMore() {
      this.loading = true
      // 模拟API请求
      await new Promise(resolve => setTimeout(resolve, 1000))
      const newItems = Array(10).fill().map((_, i) => ({
        id: this.items.length + i,
        content: `Item ${this.items.length + i}`
      }))
      this.items = [...this.items, ...newItems]
      this.page++
      this.loading = false
    }
  }
}
</script>

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

使用Intersection Observer API

现代浏览器支持的Intersection Observer API提供了更高效的滚动检测方式：

vue无限滚动实现

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

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  mounted() {
    this.initObserver()
    this.loadMore()
  },
  methods: {
    initObserver() {
      const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && !this.loading && !this.finished) {
          this.loadMore()
        }
      })
      observer.observe(this.$refs.loader)
    },
    async loadMore() {
      this.loading = true
      // 模拟API请求
      await new Promise(resolve => setTimeout(resolve, 1000))
      const newItems = Array(10).fill().map((_, i) => ({
        id: this.items.length + i,
        content: `Item ${this.items.length + i}`
      }))
      this.items = [...this.items, ...newItems]
      this.page++
      // 假设最多加载5页
      if (this.page >= 5) this.finished = true
      this.loading = false
    }
  }
}
</script>