mirror of
https://github.com/nuxt/ui.git
synced 2026-09-14 19:51:10 +08:00
Mike Newbon
45 lines
973 B
Vue
45 lines
973 B
Vue
<script setup lang="ts">
|
|
const heights = [320, 480, 640, 800]
|
|
|
|
// Pseudo-random height selection with longer cycle to avoid alignment patterns
|
|
function getHeight(index: number) {
|
|
const seed = (index * 11 + 7) % 17
|
|
return heights[seed % heights.length]!
|
|
}
|
|
|
|
const items = Array.from({ length: 1000 }).map((_, index) => {
|
|
const height = getHeight(index)
|
|
|
|
return {
|
|
id: index,
|
|
title: `Item ${index + 1}`,
|
|
src: `https://picsum.photos/640/${height}?v=${index}`,
|
|
width: 640,
|
|
height
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UScrollArea
|
|
v-slot="{ item, index }"
|
|
:items="items"
|
|
orientation="vertical"
|
|
:virtualize="{
|
|
gap: 16,
|
|
lanes: 3,
|
|
estimateSize: 480
|
|
}"
|
|
class="w-full h-128 p-4"
|
|
>
|
|
<img
|
|
:src="item.src"
|
|
:alt="item.title"
|
|
:width="item.width"
|
|
:height="item.height"
|
|
:loading="index > 8 ? 'lazy' : 'eager'"
|
|
class="rounded-md size-full object-cover"
|
|
>
|
|
</UScrollArea>
|
|
</template>
|