使用vue-virtual-scroller遇到的问题

问题一：报错Error in nextTick: “Error: Key is undefined on item (keyField is ‘userid’)”

字面上的意思，keyField的参数设置不对，导致找不到唯一id，需要设置填充数据的唯一key，例如你的数据格式是：

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

那么key-field应该设置为userId

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

问题二：报错Error in v-on handler: “Error: Rendered items limit reached”

外层div应该设置固定高度，不然虚拟列表不起作用。

<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>

这里我固定高度设置为屏幕高度，在实际使用中，大家可以根据项目要求设置固定高度。

问题三：虚拟列表只显示了一部分

这里可能有两个原因引起：
1、内容的高度低于min-item-size参数

<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>

这里min-item-size设置为54，如果DynamicScrollerItem的最小高度设置低于54，可能就只会显示开头部分item。

2、没有引入样式

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

没有引入这个样式，也会导致item显示不全。

问题四：有空白的Item

可能大家发现，有些地方的item是空白的。有空白item的原因就是你使用列表数据里面相邻数据有重复的key，拿上面的例子数据来说就是连续两个重复数据的userId是一样的。

题外话

大家如果想用大量数据测试成果，强烈推荐fakerjs，可以创建大量虚假数据，用于测试虚拟列表。
fakerjs
fakerjs github

附上最简单使用
1、下载依赖

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

2、生成数据

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(),
      }
}