virtual-list

中文 | English

Advantages

• Only 4 required props, simple and very easy to use.
• Big data list with high render performance and efficient.
• You don't have to care about item size, it will calculate automatic.
• There is no framework limitation, only one premise, the framework used supports web component

Live demo

https://buzhifanji.github.io/render-big-data/

Simple usage

example by use vue.

npm i render-big-data --save

component:

<script>
import { initRenderData, visiableData } from "render-big-data";
import Mock from "mockjs";
import { onUnmounted } from "vue";

setTimeout(() => {
  const reslut: { key: number; value: string }[] = [];
  for (let i = 0; i < 10000; i++) {
    reslut.push({ key: i, value: Mock.mock({ content: "@cparagraph()" }).content });
  }

  initRenderData(reslut);  // first:  prepare all data
}, 1000);


// second: subscribe data
const list = []
const unsubscribe = visiableData.subscribe((value) => (data = value));


// third: don't forget unsubscribe
onUnmounted(unsubscribe);
</script>

<template>
 <virtual-list>
    <virtual-list-item v-for="(item, index) in list" :index="index"> // index is important here, don't forget it
       <p class="content">{item.key}: {item.value}</p>
    </virtual-list-item>
  </virtual-list>
</template>

web component setting

if you use vue，you should read using-custom-elements-in-vue.

if you use react, you should read Using Web Components in React.

if you use angular, you should read using-custom-elements-in-angular.

if you use svelte, you don't need any settings.

and so on.