使用vue-virtual-scroller遇到的問題及解決

更新時間：2024年03月21日 10:04:06 作者：言木土

這篇文章主要介紹了使用vue-virtual-scroller遇到的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

問題一

報錯Error in nextTick: “Error: Key is undefined on item (keyField is ‘userid’)”

字面上的意思，keyField的參數(shù)設置不對，導致找不到唯一id，需要設置填充數(shù)據(jù)的唯一key，例如你的數(shù)據(jù)格式是：

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>

這里我固定高度設置為屏幕高度，在實際使用中，大家可以根據(jù)項目要求設置固定高度。

問題三

虛擬列表只顯示了一部分

這里可能有兩個原因引起：

1、內(nèi)容的高度低于min-item-size參數(shù)

<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

可能大家發(fā)現(xiàn)，有些地方的item是空白的。

有空白item的原因就是你使用列表數(shù)據(jù)里面相鄰數(shù)據(jù)有重復的key，拿上面的例子數(shù)據(jù)來說就是連續(xù)兩個重復數(shù)據(jù)的userId是一樣的。

題外話

大家如果想用大量數(shù)據(jù)測試成果，強烈推薦fakerjs，可以創(chuàng)建大量虛假數(shù)據(jù)，用于測試虛擬列表。

fakerjs
fakerjs github

附上最簡單使用

1、下載依賴

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

2、生成數(shù)據(jù)

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