当前位置：首页 > VUE

vue实现无限滚动

2026-03-29 11:49:14VUE

在Vue中实现无限滚动（Infinite Scroll）可以通过监听滚动事件并结合动态加载数据来实现。以下是基于vue-infinite-scroll插件和原生实现的两种方式：

1. 使用vue-infinite-scroll插件

安装插件：

npm install vue-infinite-scroll --save

使用示例：

vue实现无限滚动

<template>
  <div
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="10"
  >
    <div v-for="(item, index) in items" :key="index">
      {{ item }}
    </div>
  </div>
</template>

<script>
import infiniteScroll from 'vue-infinite-scroll'

export default {
  directives: { infiniteScroll },
  data() {
    return {
      items: [],
      busy: false,
      page: 1
    }
  },
  methods: {
    loadMore() {
      this.busy = true
      // 模拟异步加载数据
      setTimeout(() => {
        const newItems = Array.from({ length: 20 }, (_, i) => `Item ${this.items.length + i + 1}`)
        this.items = [...this.items, ...newItems]
        this.page++
        this.busy = false
      }, 1000)
    }
  },
  created() {
    // 初始化数据
    this.loadMore()
  }
}
</script>

2. 原生实现方式

<template>
  <div class="scroll-container" @scroll="onScroll">
    <div v-for="(item, index) in items" :key="index" class="item">
      {{ item }}
    </div>
    <div v-if="loading" class="loading">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1,
      hasMore: true
    }
  },
  methods: {
    onScroll({ target: { scrollTop, clientHeight, scrollHeight } }) {
      // 当滚动到底部附近时加载更多
      if (scrollTop + clientHeight >= scrollHeight - 100 && !this.loading && this.hasMore) {
        this.loadMore()
      }
    },
    async loadMore() {
      this.loading = true
      try {
        // 模拟API调用
        const newItems = await this.fetchData()
        this.items = [...this.items, ...newItems]
        this.page++
        // 假设当返回数据少于20条时没有更多数据
        if (newItems.length < 20) {
          this.hasMore = false
        }
      } finally {
        this.loading = false
      }
    },
    fetchData() {
      return new Promise(resolve => {
        setTimeout(() => {
          const newItems = Array.from({ length: 20 }, (_, i) => `Item ${this.items.length + i + 1}`)
          resolve(newItems)
        }, 1000)
      })
    }
  },
  created() {
    this.loadMore()
  }
}
</script>

<style>
.scroll-container {
  height: 500px;
  overflow-y: auto;
}
.item {
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.loading {
  padding: 20px;
  text-align: center;
}
</style>