lite-virtual-list

English | 中文 | Example

Virtual list component library supporting waterfall flow based on Vue

• 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

Use

Install

npm install lite-virtual-list

Use

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>

Props

Slot

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

Event

scroll

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

domUpdateSuccess

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

loadMore

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

deleteSuccess

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