使用vue-virtual-scroller遇到的问题及解决
作者：言木土
这篇文章主要介绍了使用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，可以创建大量虚假数据，用于测试虚拟列表。
附上最简单使用
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(),
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。