useVirtualList

カテゴリ

エクスポートサイズ

1.8 kB

最終更新日

先週

警告

より多くの機能が必要な場合は、vue-virtual-scrollerの使用を検討してください。

簡単に仮想リストを作成します。仮想リスト（バーチャルスクローラーと呼ばれることもあります）を使用すると、大量のアイテムを効率的にレンダリングできます。`container`要素内のアイテムを表示するために必要な最小限のDOMノードのみをレンダリングし、`wrapper`要素を使用して`container`要素の全高をエミュレートします。

デモ

ソースコード

インデックスへジャンプ

サイズでリストをフィルタリング

使用方法

シンプルなリスト

TypeScript

import { useVirtualList } from '@vueuse/core'

const { list, containerProps, wrapperProps } = useVirtualList(
  Array.from(Array.from({ length: 99999 }).keys()),
  {
    // Keep `itemHeight` in sync with the item's row.
    itemHeight: 22,
  },
)

設定

状態	型	説明
itemHeight	`数値`	`wrapper`要素の総高が正しく計算されるようにします。
itemWidth	`数値`	`wrapper`要素の総幅が正しく計算されるようにします。
overscan	`数値`	事前にレンダリングされるDOMノードの数。非常に速くスクロールする場合に、アイテム間の空白を防ぎます。

* `itemHeight`または`itemWidth`は、レンダリングされる各行の高さと同期している必要があります。リストの一番下までスクロールしたときに余分な空白やちらつきが見られる場合は、`itemHeight`または`itemWidth`が行と同じ高さであることを確認してください。

リアクティブなリスト

TypeScript

import { useToggle, useVirtualList } from '@vueuse/core'
import { computed } from 'vue'

const [isEven, toggle] = useToggle()
const allItems = Array.from(Array.from({ length: 99999 }).keys())
const filteredList = computed(() => allItems.filter(i => isEven.value ? i % 2 === 0 : i % 2 === 1))

const { list, containerProps, wrapperProps } = useVirtualList(
  filteredList,
  {
    itemHeight: 22,
  },
)

Vue

<template>
  <p>Showing {{ isEven ? 'even' : 'odd' }} items</p>
  <button @click="toggle">
    Toggle Even/Odd
  </button>
  <div v-bind="containerProps" style="height: 300px">
    <div v-bind="wrapperProps">
      <div v-for="item in list" :key="item.index" style="height: 22px">
        Row: {{ item.data }}
      </div>
    </div>
  </div>
</template>

水平リスト

TypeScript

import { useVirtualList } from '@vueuse/core'

const allItems = Array.from(Array.from({ length: 99999 }).keys())

const { list, containerProps, wrapperProps } = useVirtualList(
  allItems,
  {
    itemWidth: 200,
  },
)

Vue

<template>
  <div v-bind="containerProps" style="height: 300px">
    <div v-bind="wrapperProps">
      <div v-for="item in list" :key="item.index" style="width: 200px">
        Row: {{ item.data }}
      </div>
    </div>
  </div>
</template>

コンポーネントの使用

この関数は、`@vueuse/components`パッケージを介して、レンダーレスコンポーネントバージョンも提供します。使用方法の詳細はこちら。

Vue

<template>
  <UseVirtualList :list="list" :options="options" height="300px">
    <template #default="props">
      <!-- you can get current item of list here -->
      <div style="height: 22px">
        Row {{ props.index }} {{ props.data }}
      </div>
    </template>
  </UseVirtualList>
</template>

特定の要素にスクロールするには、コンポーネントは`scrollTo(index: number) => void`を公開します。

型宣言

型宣言を表示

TypeScript

type UseVirtualListItemSize = number | ((index: number) => number)
export interface UseHorizontalVirtualListOptions
  extends UseVirtualListOptionsBase {
  /**
   * item width, accept a pixel value or a function that returns the width
   *
   * @default 0
   */
  itemWidth: UseVirtualListItemSize
}
export interface UseVerticalVirtualListOptions
  extends UseVirtualListOptionsBase {
  /**
   * item height, accept a pixel value or a function that returns the height
   *
   * @default 0
   */
  itemHeight: UseVirtualListItemSize
}
export interface UseVirtualListOptionsBase {
  /**
   * the extra buffer items outside of the view area
   *
   * @default 5
   */
  overscan?: number
}
export type UseVirtualListOptions =
  | UseHorizontalVirtualListOptions
  | UseVerticalVirtualListOptions
export interface UseVirtualListItem<T> {
  data: T
  index: number
}
export interface UseVirtualListReturn<T> {
  list: Ref<UseVirtualListItem<T>[]>
  scrollTo: (index: number) => void
  containerProps: {
    ref: Ref<HTMLElement | null>
    onScroll: () => void
    style: StyleValue
  }
  wrapperProps: ComputedRef<{
    style:
      | {
          width: string
          height: string
          marginTop: string
        }
      | {
          width: string
          height: string
          marginLeft: string
          display: string
        }
  }>
}
/**
 * Please consider using [`vue-virtual-scroller`](https://github.com/Akryum/vue-virtual-scroller) if you are looking for more features.
 */
export declare function useVirtualList<T = any>(
  list: MaybeRef<T[]>,
  options: UseVirtualListOptions,
): UseVirtualListReturn<T>