vue3-longlist

A vue3.x long list render plugin.

🦾 Type Strong: Written in Typescript

📎 Installation

$ npm i vue3-longlist

👽 Usage

main.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>

📁 Options

| 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 |

😃 Example

<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()
  }