fix: recycle scroller glitches (#174)

This commit is contained in:
Guillaume Chau 2022-11-27 14:12:25 +01:00 committed by GitHub
parent 6acc838850
commit d97beabf4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 2 deletions

View file

@ -8,6 +8,7 @@ defineProps<{
<template>
<img
:key="account.avatar"
:src="account.avatar"
:alt="account.username"
loading="lazy"

View file

@ -19,6 +19,7 @@ export default defineComponent({
onMounted(() => {
const img = document.createElement('img')
isLoaded.value = img.complete
img.onload = () => {
isLoaded.value = true
}

View file

@ -24,7 +24,13 @@ const { items, state, endAnchor, error } = usePaginator(paginator)
<template>
<div>
<template v-if="virtualScroller">
<DynamicScroller v-slot="{ item, active }" :items="items" :min-item-size="200" page-mode>
<DynamicScroller
v-slot="{ item, active }"
:items="items"
:min-item-size="200"
:key-field="keyProp"
page-mode
>
<slot :item="item" :active="active" />
</DynamicScroller>
</template>

View file

@ -11,7 +11,7 @@ const { paginator } = defineProps<{
<template>
<CommonPaginator :paginator="paginator" virtual-scroller>
<template #default="{ item, active }">
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.text]">
<DynamicScrollerItem :item="item" :active="active">
<StatusCard
:status="item"
border="b base" py-3