@vb_he/vue-virtual-scroll

FEATURE

1、async component render;
2、locate/update/delete/add specify location;
3、scroll loading;
4、chat mode(keep bottom position);
5、loading mode(scroll loading);

demo

USAGE

1、install;

npm install --save @vb_he/vue-virtual-scroll

2、import;

import VirtualList from '@vb_he/vue-virtual-scroll'
import '@vb_he/vue-virtual-scroll/dist/style.css'

// global registry
createApp(App).use(VirtualList).mount('#app')

3、use in vue component

<div style="width: 800px;height: 1000px;">
    <Virtual-list
    ref="virtualScroll"
    :scrollItem="StaticItem"
    :height="42"
    :perPageItemNum="20"
    ></Virtual-list>
</div>

props

base props:

loadingOptions:

expose method

you may need to understand expose

basically, you can only use all this methods to change the view, e.g.

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { VirtualExpose } from '@vb_he/vue-virtual-scroll'
import StaticItem from './../components/static.component.vue'
import { getMessage } from "./../mock"
const virtualScroll = ref<VirtualExpose>()
const data = reactive({
    locateNum: 0,
    updateNum: 0,
    delNum: 0,
    addNum: 0,
    size: 100000
})
onMounted(async() => {
    virtualScroll.value!.setSourceData(await loadData())
})
function loadData(): Promise<any[]> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(getMessage(data.size))
        },1000)
    })
}
function locate() {
    virtualScroll.value?.locate(data.locateNum)
}
async function update() {
    const newData = await getMessage(1)

    virtualScroll.value?.update(data.updateNum, newData[0])
}
function del() {
    virtualScroll.value?.del(data.delNum)
}
async function add() {
    virtualScroll.value?.add(data.addNum, await getMessage(1))
}
async function reset() {
    virtualScroll.value!.setSourceData(await loadData())
}
</script>
<template>
    <div style="width: 800px;height: 1000px;">
        <Virtual-list
        ref="virtualScroll"
        :perPageItemNum="40"
        :scrollItem="StaticItem"
        :height="42"
        ></Virtual-list>
    </div>
</template>

notices

1、element must set height value(100px, 100%, flex, etc.) which was wrapping VirtualList;
2、for better performance, emit 'itemLoaded' function to cached offsetHeight when aysnc element(e.g. image) loaded, e.g.

const emits = defineEmits(['itemLoaded'])

function imageLoaded() {
    emits('itemLoaded')
}

<template>
    <img @load="imageLoaded" :src="https://raw.githubusercontent.com/binvb/virtual-scroll/HEAD/itemData.imgUrl" />
</template>