当前位置：首页 > VUE

vue实现无线滚动列表

2026-03-27 01:34:22VUE

无限滚动列表的实现方法

在Vue中实现无限滚动列表通常需要结合虚拟滚动技术或监听滚动事件动态加载数据。以下是两种常见实现方式：

基于滚动事件监听的方法

安装依赖（如需要）：

npm install lodash.throttle

组件代码示例：

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

<script>
import throttle from 'lodash.throttle';

export default {
  data() {
    return {
      allItems: [],
      visibleItems: [],
      loading: false,
      page: 1,
      pageSize: 20
    };
  },
  mounted() {
    this.fetchData();
    this.handleScroll = throttle(this._handleScroll, 200);
  },
  methods: {
    async fetchData() {
      this.loading = true;
      const newData = await api.getData(this.page, this.pageSize);
      this.allItems = [...this.allItems, ...newData];
      this.visibleItems = this.allItems.slice(0, this.page * this.pageSize);
      this.loading = false;
    },
    _handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollHeight - (scrollTop + clientHeight) < 50 && !this.loading) {
        this.page++;
        this.fetchData();
      }
    }
  }
};
</script>

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

使用第三方库vue-virtual-scroller

安装依赖：

npm install vue-virtual-scroller

全局注册：

vue实现无线滚动列表

import VueVirtualScroller from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

Vue.use(VueVirtualScroller);

组件使用示例：

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
    @scroll="handleScroll"
  >
    <template v-slot="{ item }">
      <div class="item">{{ item.content }}</div>
    </template>
  </RecycleScroller>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      loading: false
    };
  },
  methods: {
    async loadMore() {
      if (this.loading) return;
      this.loading = true;
      const newItems = await api.getData(this.page);
      this.items = [...this.items, ...newItems];
      this.page++;
      this.loading = false;
    },
    handleScroll() {
      if (this.$refs.scroller && this.$refs.scroller.getScrollPosition().end >= this.items.length - 5) {
        this.loadMore();
      }
    }
  }
};
</script>

性能优化建议

确保为列表项设置固定高度或使用CSS contain属性优化渲染性能

使用Object.freeze()处理大数据量时的响应式数据

vue实现无线滚动列表

this.items = Object.freeze([...this.items, ...newItems]);

考虑使用Intersection Observer API替代滚动事件监听

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    this.loadMore();
  }
});
observer.observe(this.$refs.observerElement);