快捷導(dǎo)航

使用vue-virtual-scroller遇到的問(wèn)題及解決

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

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

問(wèn)題一

報(bào)錯(cuò)Error in nextTick: “Error: Key is undefined on item (keyField is ‘userid’)”

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

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

那么key-field應(yīng)該設(shè)置為userId

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

問(wèn)題二

報(bào)錯(cuò)Error in v-on handler: “Error: Rendered items limit reached”

外層div應(yīng)該設(shè)置固定高度，不然虛擬列表不起作用。

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

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

問(wèn)題三

虛擬列表只顯示了一部分

這里可能有兩個(gè)原因引起：

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設(shè)置為54，如果DynamicScrollerItem的最小高度設(shè)置低于54，可能就只會(huì)顯示開頭部分item。

2、沒有引入樣式

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

沒有引入這個(gè)樣式，也會(huì)導(dǎo)致item顯示不全。

問(wèn)題四

有空白的Item

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

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

題外話

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

fakerjs
fakerjs github

附上最簡(jiǎn)單使用

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