Skip to content
On this page

VirtualScroll

基础用法

vue
<template>
  <div style="width: 300px; height: 300px">
    <g-virtual-scroll @scrollChange="change">
      <div style="width: 100%">
        <g-virtual-scroll-column :items="items">
          <template #renderItem="{ key }">
            <div>{{ key }}</div>
          </template>
        </g-virtual-scroll-column>
      </div>
    </g-virtual-scroll>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GVirtualScroll, GVirtualScrollColumn } from '@lingjhf/guava-vue'

const items = ref([...Array(10000).keys()].map((item) => ({ key: `${item}`, value: 50 })))
</script>