使用vue-virtual-scroller遇到的问题及解决

list = [
	{ userId: 1001, username: "xiaoming"},
	{ userId: 1002, username: "liming"},
	...
]

<RecycleScroller
      class="scroller"
      :items="list"
      :item-size="32"
      key-field="userId"
      v-slot="{ item }"
    >
      <div class="user">
        {{ item.username }}
      </div>
    </RecycleScroller>

<template>
  <div class="main">
    <RecycleScroller
      class="scroller"
      :items="list"
      :item-size="32"
      key-field="userId"
      v-slot="{ item }"
    >
      <div class="user">
          <div>{{ item.username }}</div>
      </div>
    </RecycleScroller>
  </div>
</template>

<style scoped>
.main {
  height: 100vh;
}
.scroller {
  height: 100%;
}
</style>

<DynamicScroller
            :items="items"
            :min-item-size="54"
            keyField="userId"
            class="scroller">
            <template v-slot="{ item, index, active }">
                <DynamicScrollerItem
                    :item="item"
                    :active="active"
                    :size-dependencies="[item.UserName]"
                    :data-index="index"
                    class="user">
                    
                </DynamicScrollerItem>
            </template>
</DynamicScroller>

<style scoped>
.user {
  min-height: 54px;//这里不能低于54
  padding: 0 12px;
  display: flex;
  align-items: center;
}
</style>

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

npm install --save-dev @faker-js/faker

import { faker } from '@faker-js/faker'

Array.from({ length: 10000 }).forEach(() => {
      this.list.push(createRandomUser())
})

createRandomUser() {
      return {
        userId: faker.datatype.uuid(),
        username: faker.internet.userName(),
      }
}