summonnight / vue-virtual-scroll-list Goto Github PK

• Advantages
• Live demos
• How it works
• Simple usage
  • vfor-mode
  • item-mode
  • variable height
• Performance comparison
  • Build time wasted
  • Total memory used
• Attentions
• Props type
• Public methods
• Contributions
• Changelogs

• Items are independent.

• Tiny and very easy to use.

• Big data list with high performance.

• Build 100,000 items with vfor-mode.

• Build 100,000 items with item-mode.

• Build 100,000 items with variable height.

The main difference between item-mode and vfor-mode is that: item-mode make a higher performance but not very convenient to handle changing data frequently; however, vfor-mode is just the opposite.

Besides, you can also compare the experience which without using virtual-list here: without-virtual-list.

npm install vue-virtual-scroll-list --save

All you need to care about is only data!

<template>
    <div>
        <virtual-list :size="40" :remain="8">
            <item v-for="item of items" :key="item.id" />
        </virtual-list>
    </div>
</template>
<script>
    import item from '../item.vue'
    import virtualList from 'vue-virtual-scroll-list'
    export default {
        data () {
            return {
                items: [ {id: 1}, {id: 2}, {id: 3}, ... ]
            }
        },
        components: { item, 'virtual-list': virtualList }
    }
</script>

This mode can save a considerable amount of memory and performance. Props item, itemcount and itemprops are both required, you don't need put <item/> with a v-for directive inside virtual-list, just assign it as prop item:

<template>
    <div>
        <virtual-list :size="40" :remain="8"
            :item="item"
            :itemcount="100000"
            :itemprops="getItemprops"
        />
    </div>
</template>
<script>
    import itemComponent from '../item.vue'
    import virtualList from 'vue-virtual-scroll-list'
    export default {
        data () {
            return {
                item: itemComponent,
            }
        },
        methods: {
            getItemprops (itemIndex) {
                const itemProps = getItemProp(itemIndex)
                return {
                    // <item/> will render with itemProps.
                    // https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
                    props: itemProps
                }
            }
        },
        components: { 'virtual-list': virtualList }
    }
</script>

Whenever you want to change any item data from list in this mode, you need call public method forceRender() after source data change. Increase or decrease items, you need to keep itemcount and call forceRender() together.

Using variable height, props remain and size is still required. All the index variable height and scroll offset will be cached by virtual-list after the binary-search calculate, if you want to change anyone <item/> height from data, you need call public method updateVariable(index) to clear the offset cache.

If you assign variable as true, do not set inline style height inside <item/> component, you must set inline style height on <item/> component outside directly, such as:

<template>
    <div>
        <virtual-list :size="40" :remain="8" :variable="true">
            <item v-for="item of items" :key="item.id" :style="{ height: item.height + 'px' }" />
        </virtual-list>
    </div>
</template>

More use ways or getting start you can refer to these clearly demos or test suites.

According to the demos above, here are lists of approximate statistics:

• Must assign the :key property on <item> component or dom frag with v-for directive.

• Consider using box-sizing: border-box on <item> if you want absolutely correct scroll height.

Here are some usefull public methods you can call via ref:

• forceRender(): force render virtual-list if you need or make it refresh.

• updateVariable(index): update item height by index in variable height list.

Welcome to improve vue-virtual-scroll-list with any issue, pull request or code review.

Maintain and update occasionally, for changes see release.

MIT License