Composables
usePdfKitVirtualScroll
Virtual scrolling untuk dokumen besar.
Menyediakan virtual scrolling untuk rendering dokumen besar secara efisien.
Penggunaan
const containerRef = ref<HTMLElement | null>(null)
const totalItems = ref(100)
const itemHeight = ref(800)
const {
visibleItems,
startIndex,
endIndex,
scrollTop,
onScroll,
totalHeight,
offsetTop,
scrollToItem,
currentVisiblePage,
} = usePdfKitVirtualScroll({
totalItems,
itemHeight,
containerRef,
overscan: 2,
})
Opsi
| Opsi | Tipe | Default | Deskripsi |
|---|---|---|---|
totalItems | Ref<number> | wajib | Total jumlah item (halaman) |
itemHeight | Ref<number> | wajib | Perkiraan tinggi setiap item |
containerRef | Ref<HTMLElement | null> | wajib | Referensi ke kontainer yang dapat digulir |
overscan | number | 2 | Item ekstra yang dirender di atas/bawah viewport |
totalItems, itemHeight, dan containerRef bersifat wajib dan harus berupa ref Vue, bukan nilai biasa.
:::
Nilai yang Dikembalikan
| Properti | Tipe | Deskripsi |
|---|---|---|
visibleItems | Ref<number[]> | Indeks item yang akan dirender |
startIndex | Ref<number> | Indeks item pertama yang terlihat |
endIndex | Ref<number> | Indeks item terakhir yang terlihat |
scrollTop | Ref<number> | Posisi gulir saat ini |
onScroll | () => void | Handler gulir kontainer |
totalHeight | Ref<number> | Total tinggi yang dapat digulir |
offsetTop | Ref<number> | Offset untuk memposisikan item yang terlihat |
scrollToItem | (index: number) => void | Gulir ke item tertentu |
currentVisiblePage | Ref<number> | Halaman yang terlihat saat ini (berbasis 1) |
Contoh
<template>
<div ref="containerRef" class="h-[600px] overflow-auto" @scroll="onScroll">
<div :style="{ height: `${totalHeight}px`, position: 'relative' }">
<div
v-for="index in visibleItems"
:key="index"
:style="{
position: 'absolute',
top: `${index * itemHeight - offsetTop}px`,
height: `${itemHeight}px`,
}"
>
<!-- Render halaman {{ index + 1 }} -->
</div>
</div>
</div>
</template>
<script setup>
const containerRef = ref(null)
const totalItems = ref(100)
const itemHeight = ref(800)
const {
visibleItems,
totalHeight,
offsetTop,
onScroll,
scrollToItem,
} = usePdfKitVirtualScroll({
totalItems,
itemHeight,
containerRef,
})
// Gulir ke halaman 50
scrollToItem(49)
</script>