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> <template>
<img <img
:key="account.avatar"
:src="account.avatar" :src="account.avatar"
:alt="account.username" :alt="account.username"
loading="lazy" loading="lazy"

View file

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

View file

@ -24,7 +24,13 @@ const { items, state, endAnchor, error } = usePaginator(paginator)
<template> <template>
<div> <div>
<template v-if="virtualScroller"> <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" /> <slot :item="item" :active="active" />
</DynamicScroller> </DynamicScroller>
</template> </template>

View file

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