A vue3.x image lazyload plugin.
π¦Ύ Type Strong: Written in Typescript
$ npm i vue3-longlistmain.ts
import { createApp } from "vue";
import App from "./App.vue";
import llist from "vue3-longlist";
createApp(App)
.use(llist)
.mount("#app");App.vue
<template>
<llist :list="your long list">
</template>| key | description | default | type |
|---|---|---|---|
| list | The long list you want to render | - | array |
| itemHeight | v-for item height (px) | 18 | number |
| scrollDown | Slide how much triggers loading | 8 | number |
<llist :list="aab">
<template v-slot:default="scope">
<div>
<!-- index is v-for indexοΌ item is v-for item -->
{{scope.index}},{{scope.item + 1 }}
</div>
</template>
</llist> aab: Array<number> = []
aa() {
for (let index = 0; index < 100000; index++) {
this.aab.push(index)
}
}
created(){
this.aa()
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent