当前位置：首页 > VUE

vue实现列表滚动

2026-01-17 18:26:17VUE

Vue 实现列表滚动的方法

使用 CSS 实现滚动

通过 CSS 的 overflow 属性可以轻松实现列表滚动。在 Vue 的模板中，为列表容器添加 overflow-y: auto 或 overflow-y: scroll 样式，并设置固定高度。

<template>
  <div class="scroll-container">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

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

使用第三方库（如 vue-virtual-scroller）

对于长列表，推荐使用虚拟滚动库（如 vue-virtual-scroller）优化性能。虚拟滚动仅渲染可视区域内的元素，减少 DOM 节点数量。

安装库：

npm install vue-virtual-scroller

使用示例：

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

<script>
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

export default {
  components: { RecycleScroller },
  data() {
    return {
      items: [...], // 长列表数据
    };
  },
};
</script>

<style>
.scroller {
  height: 300px;
}
</style>

监听滚动事件实现动态加载

结合 @scroll 事件和计算属性，可以实现滚动到底部时动态加载更多数据。

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

<script>
export default {
  data() {
    return {
      items: [...], // 全部数据
      visibleItems: [],
      isLoading: false,
      batchSize: 20,
      currentIndex: 0,
    };
  },
  mounted() {
    this.loadMore();
  },
  methods: {
    handleScroll(event) {
      const { scrollTop, clientHeight, scrollHeight } = event.target;
      if (scrollHeight - scrollTop <= clientHeight + 50 && !this.isLoading) {
        this.loadMore();
      }
    },
    loadMore() {
      this.isLoading = true;
      setTimeout(() => {
        const nextBatch = this.items.slice(
          this.currentIndex,
          this.currentIndex + this.batchSize
        );
        this.visibleItems = [...this.visibleItems, ...nextBatch];
        this.currentIndex += this.batchSize;
        this.isLoading = false;
      }, 500);
    },
  },
};
</script>

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

使用原生 JavaScript 实现平滑滚动

通过 Element.scrollTo() 方法可以实现平滑滚动效果，例如点击按钮滚动到指定位置。

<template>
  <div>
    <button @click="scrollToBottom">滚动到底部</button>
    <div ref="scrollContainer" class="scroll-container">
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.text }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...], // 列表数据
    };
  },
  methods: {
    scrollToBottom() {
      const container = this.$refs.scrollContainer;
      container.scrollTo({
        top: container.scrollHeight,
        behavior: 'smooth',
      });
    },
  },
};
</script>

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