1.0.0-beta.73 • Published 3 years ago

@vb_he/vue-virtual-scroll v1.0.0-beta.73

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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: | key | default value | required | description | | ---- | ------------- | -------- | ----------- | | scrollItem | null | true | scroll item inside component | | perPageItemNum | 20 | true | at less display area number, normaly component keep render 2 * perPageItemNum item | | height | 100 | true | item size(height),for better performance | | direction | 'down' | false | 'up'/'down', need to set 'up' in chat mode | | loadingOptions | null | false | see under |

loadingOptions: | key | default value | required | description | | --- | ------------- | -------- | ----------- | | loadingFn | null | true | need to return Promise<any[]> | | loadingComponent | loading.io style | false | can replace default loading component | | nomoreData | false | false | set true if no more data | | nomoreDataText | 'no more data' | false | set no more data text |

expose method

you may need to understand expose

nameargumentsdescription
setSourceDatadata: any[]set list data
locateindex: numberlocate at specify index
delindex: number | number[]delete some item
addindex: number, insertData: any[]add item/items
updateindex: number, data: anyupdate item
getDatanullget list data
getCurrentViewPortDatanullget current viewport data

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、must set height value(100px, 100%, flex, etc.) which wrap VirtualList;

1.2.4-beta.1

2 years ago

1.2.3

2 years ago

1.2.0

2 years ago

1.2.2-beta.1

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.2.1-beta.1

2 years ago

1.2.1-beta.2

2 years ago

1.2.1-beta.3

2 years ago

1.2.0-beta.1

2 years ago

1.2.0-beta.3

2 years ago

1.2.0-beta.2

2 years ago

1.1.1-beta.1

2 years ago

1.1.1

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

1.0.5

2 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.1.0

2 years ago

1.0.0-beta.86

3 years ago

1.0.0-beta.84

3 years ago

1.0.0-beta.85

3 years ago

1.0.0-beta.82

3 years ago

1.0.0-beta.83

3 years ago

1.0.0-beta.80

3 years ago

1.0.0-beta.81

3 years ago

1.0.0-beta.77

3 years ago

1.0.0-beta.78

3 years ago

1.0.0-beta.75

3 years ago

1.0.0-beta.76

3 years ago

1.0.0-beta.74

3 years ago

1.0.0-beta.79

3 years ago

1.0.0-beta.70

3 years ago

1.0.0-beta.66

3 years ago

1.0.0-beta.22

3 years ago

1.0.0-beta.67

3 years ago

1.0.0-beta.23

3 years ago

1.0.0-beta.64

3 years ago

1.0.0-beta.20

3 years ago

1.0.0-beta.65

3 years ago

1.0.0-beta.21

3 years ago

1.0.0-beta.62

3 years ago

1.0.0-beta.63

3 years ago

1.0.0-beta.60

3 years ago

1.0.0-beta.61

3 years ago

1.0.0-beta.28

3 years ago

1.0.0-beta.29

3 years ago

1.0.0-beta.26

3 years ago

1.0.0-beta.27

3 years ago

1.0.0-beta.68

3 years ago

1.0.0-beta.24

3 years ago

1.0.0-beta.69

3 years ago

1.0.0-beta.25

3 years ago

1.0.0-beta.55

3 years ago

1.0.0-beta.11

3 years ago

1.0.0-beta.56

3 years ago

1.0.0-beta.12

3 years ago

1.0.0-beta.53

3 years ago

1.0.0-beta.54

3 years ago

1.0.0-beta.10

3 years ago

1.0.0-beta.51

3 years ago

1.0.0-beta.52

3 years ago

1.0.0-beta.50

3 years ago

1.0.0-beta.19

3 years ago

1.0.0-beta.17

3 years ago

1.0.0-beta.18

3 years ago

1.0.0-beta.15

3 years ago

1.0.0-beta.16

3 years ago

1.0.0-beta.57

3 years ago

1.0.0-beta.13

3 years ago

1.0.0-beta.44

3 years ago

1.0.0-beta.45

3 years ago

1.0.0-beta.42

3 years ago

1.0.0-beta.43

3 years ago

1.0.0-beta.40

3 years ago

1.0.0-beta.41

3 years ago

1.0.0-beta.48

3 years ago

1.0.0-beta.49

3 years ago

1.0.0-beta.46

3 years ago

1.0.0-beta.47

3 years ago

1.0.0-beta.2

3 years ago

1.0.0-beta.3

3 years ago

1.0.0-beta.4

3 years ago

1.0.0-beta.5

3 years ago

1.0.0-beta.1

3 years ago

1.0.0-beta.33

3 years ago

1.0.0-beta.34

3 years ago

1.0.0-beta.31

3 years ago

1.0.0-beta.32

3 years ago

1.0.0-beta.73

3 years ago

1.0.0-beta.6

3 years ago

1.0.0-beta.30

3 years ago

1.0.0-beta.7

3 years ago

1.0.0-beta.71

3 years ago

1.0.0-beta.8

3 years ago

1.0.0-beta.72

3 years ago

1.0.0-beta.9

3 years ago

1.0.0-beta.39

3 years ago

1.0.0-beta.37

3 years ago

1.0.0-beta.38

3 years ago

1.0.0-beta.35

3 years ago

1.0.0-beta.36

3 years ago

0.2.0

4 years ago

0.1.0

4 years ago