当前位置：首页 > VUE

vue实现无线滚动

2026-03-28 22:41:41VUE

无限滚动的实现方法

无限滚动（Infinite Scroll）是一种常见的用户体验优化技术，允许用户在滚动到页面底部时自动加载更多内容。Vue.js 提供了多种方式实现这一功能。

使用 Intersection Observer API

Intersection Observer API 可以监听元素是否进入视口，适合实现无限滚动。

<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,
      observer: null
    }
  },
  mounted() {
    this.observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.loadMore()
      }
    })
    this.observer.observe(this.$refs.loader)
    this.fetchItems()
  },
  methods: {
    fetchItems() {
      // 模拟 API 调用
      setTimeout(() => {
        const newItems = Array(10).fill().map((_, i) => ({
          id: (this.page - 1) * 10 + i,
          content: `Item ${(this.page - 1) * 10 + i + 1}`
        }))
        this.items = [...this.items, ...newItems]
      }, 500)
    },
    loadMore() {
      this.page++
      this.fetchItems()
    }
  },
  beforeDestroy() {
    this.observer.disconnect()
  }
}
</script>

使用滚动事件监听

传统方法通过监听滚动事件实现无限滚动。

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

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      isLoading: false
    }
  },
  mounted() {
    this.fetchItems()
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    fetchItems() {
      this.isLoading = true
      setTimeout(() => {
        const newItems = Array(10).fill().map((_, i) => ({
          id: (this.page - 1) * 10 + i,
          content: `Item ${(this.page - 1) * 10 + i + 1}`
        }))
        this.items = [...this.items, ...newItems]
        this.isLoading = false
      }, 500)
    },
    handleScroll() {
      const scrollPosition = window.innerHeight + window.scrollY
      const pageHeight = document.body.offsetHeight
      if (pageHeight - scrollPosition < 100 && !this.isLoading) {
        this.page++
        this.fetchItems()
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

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

使用第三方库

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="infiniteHandler"></infinite-loading>
  </div>
</template>

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

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