English | 中文 | Example

• Support fixed height

• Support variable height

• Support two column waterfall flow layout

• Support DOM multi screen configuration

• Support status selection

• Support data dynamic appending

• Support dynamic deletion of data

npm install lite-virtual-list

import liteVirtualList from "lite-virtual-list"

Vue.use(liteVirtualList)

<template>
  <lite-virtual-list type="fixed" :size="80" :remain="8" :data="items">
    <div slot-scope="{ item }" style="height: 80px">{{ item.value }}</div>
  </lite-virtual-list>
</template>
<script>
    let items = []
    let count = 1000
    for (let i = 0; i < count; i  ) {
        items.push({ id: i, value: i })
    }
    export default {
        data() {
            return { items }
        }
    }
</script>

 <lite-virtual-list >
   <!-- The default slot can get the data of each item-->
   <template slot="default" slot-scope="{ item }" >
      <div>{{item.id}}</div>
   </template>

   <!-- bottom -->
   <template slot="bottom">
     <div>Loading...</div>
   </template>
 </lite-virtual-list>

Triggered when page scrolls

The callback returns an object

When the type is fixed or variable, the object contains the following properties:

• scrollTop : How far the page scrolls

• renderScrollTop : Distance between the render area and the page scroll

• renderData : Data rendered while scrolling

When the type is waterfall, the object contains the following properties:

• scrollTop : How far the page scrolls
• renderLeftScrollTop : Distance between the data rendering area in the left column and the page scrolling
• renderRightScrollTop : Distance between the right column data rendering area and the page scrolling
• renderLeftData : Left column scrolls the rendered data
• renderLeftData : Right column scrolls the rendered data

Trigger after DOM rendering to page

When the type is fixed or variable, the callback will return

renderData : Data rendered to the page

When the type is variable, the callback will return an object containing the following properties:

• renderLeftData : Left column scrolls the rendered data
• renderLeftData : Right column scrolls the rendered data

This callback is triggered when the page scrolls to the bottom. You can configure how far it is from the bottom in combination with the 'distance' property. The default value is 50

Dynamic deletion of an item will be triggered after success, and the callback will return the data of the currently deleted item