使用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,可以创建大量虚假数据,用于测试虚拟列表。
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(),
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)