Vue.js中基于vue-virtual-scroller实现虚拟滚动的问题求助

1. 安装依赖 #

首先安装vue-virtual-scroller及配套样式：

npm install vue-virtual-scroller
# 或使用yarn
yarn add vue-virtual-scroller

2. 修改HomeView.vue组件 #

替换原有的普通列表渲染逻辑，改用虚拟滚动组件：

<script setup>
import { ref, onMounted } from "vue"
import NavBar from "../components/NavBar.vue"
import UserPost from "../components/UserPost.vue"
import PostService from "../services/PostService"
// 导入虚拟滚动组件和样式
import { VirtualScroller } from "vue-virtual-scroller"
import "vue-virtual-scroller/dist/vue-virtual-scroller.css"

// 初始化为空数组，避免null引发的初始化错误
const posts = ref([])

onMounted(() => {
  PostService.getPosts()
    .then((response) => {
      posts.value = response.data
    })
    .catch((error) => {
      console.log(error)
    })
})
</script>
<template>
  <NavBar />
  <!-- 虚拟滚动容器 -->
  <VirtualScroller
    class="posts-scroller"
    :items="posts"
    :item-height="200" <!-- 预估单条帖子高度，可根据实际渲染效果调整 -->
    key-field="_id" <!-- 帖子的唯一标识字段 -->
  >
    <!-- 插槽渲染单条帖子 -->
    <template #default="{ item }">
      <UserPost :post="item" />
    </template>
  </VirtualScroller>
</template>

<style scoped>
.posts-scroller {
  /* 设置滚动区域高度，减去导航栏高度（假设导航栏为40px） */
  height: calc(100vh - 40px);
  /* 保留原有的居中布局 */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  /* 开启垂直滚动 */
  overflow-y: auto;
}

/* 修复虚拟滚动内部容器的对齐问题 */
.posts-scroller > .vue-virtual-scroller__item-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

3. 可选优化：动态高度适配 #

如果帖子高度差异较大，固定item-height会导致滚动位置偏移，可改用自动高度检测：

<VirtualScroller
  class="posts-scroller"
  :items="posts"
  item-size="auto" <!-- 自动检测每条帖子的实际高度 -->
  key-field="_id"
>
  <!-- 插槽内容不变 -->
</VirtualScroller>

关键注意事项 #

• 必须为key-field指定帖子的唯一标识字段（此处为_id），避免渲染混乱
• 滚动容器必须设置明确高度，否则虚拟滚动无法正常工作
• 使用自动高度时，确保帖子内容结构稳定，避免动态内容频繁改变高度
• 初始将posts设为空数组而非null，防止组件初始化报错

内容的提问来源于stack exchange，提问作者batt.o