当前位置：首页 > VUE

vue实现无线滚动

2026-01-15 22:19:24VUE

实现无线滚动的基本思路

无线滚动（Infinite Scroll）的核心逻辑是监听滚动事件，当用户滚动到接近列表底部时，自动加载更多数据。Vue中可以通过结合v-for指令和滚动事件监听实现。

使用原生滚动事件监听

在Vue组件中，通过@scroll监听容器滚动事件，计算是否触底：

<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
    }
  },
  methods: {
    handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target
      if (scrollHeight - (scrollTop + clientHeight) < 50 && !this.loading) {
        this.loadMore()
      }
    },
    async loadMore() {
      this.loading = true
      const newItems = await fetchData(this.page++)
      this.items.push(...newItems)
      this.loading = false
    }
  },
  created() {
    this.loadMore()
  }
}
</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="!finished">{{ loading ? '加载中...' : '' }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1,
      finished: false
    }
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !this.loading && !this.finished) {
        this.loadMore()
      }
    })
    observer.observe(this.$refs.loader)
  },
  methods: {
    async loadMore() {
      this.loading = true
      const newItems = await fetchData(this.page++)
      if (newItems.length === 0) {
        this.finished = true
      } else {
        this.items.push(...newItems)
      }
      this.loading = false
    }
  },
  created() {
    this.loadMore()
  }
}
</script>

使用第三方库vue-infinite-loading

对于更复杂的场景，可以使用专门的无尽滚动库：

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

组件实现：


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

import InfiniteLoading from 'vue-infinite-loading'

export default { components: { InfiniteLoading }, data() { return { items: [], page: 1 } }, methods: { async loadMore($state) { try { const newItems = await fetchData(this.page++) if (newItems.length) { this.items.push(...newItems) $state.loaded() } else { $state.complete() } } catch (e) { $state.error() } } } }

vue实现无线滚动