virtual-list
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.