vue-virtual-listview v1.1.0

vue-virtual-listview

一个基于Vue2.6+的虚拟列表组件，可同时加载大量数据，并支持动态高度。

注意: 由于在 iOS UIWebviews 中，scroll 事件是在滚动停止之后触发的，所以不兼容iOS UIWebviews。了解更多

安装

通过 npm:

// npm
npm install vue-virtual-listview --save

基本使用

<template>
    <VirtualList
        :list-data="data"
        :estimated-item-size="100"
        v-slot="slotProps"
    >
        <div class="context">
            {{ slotProps.item.value }}
        </div>
    </VirtualList>
</template>

import VirtualList from 'vue-virtual-listview'

export default{
    data(){
        return [
            {
                value:'This is one demo~'
            },
            {
                value:'This is tow demo~'
            }
            //.....
        ]
    },
    component:{
        VirtualList
    }
}

下拉刷新

<template>
    <VirtualList
        ref="vlist"
        :list-data="data"
        :estimated-item-size="100"
        :top-load-more="true"
        :top-method="update"
        v-slot="slotProps"
    >
        <div class="context">
            {{ slotProps.item.value }}
        </div>
    </VirtualList>
</template>

import VirtualList from 'vue-virtual-listview'

export default{
    data(){
        return [
            {
                value:'This is one demo~'
            },
            {
                value:'This is tow demo~'
            }
            //.....
        ]
    },
    methods:{
        update(){
            let data = [
                {
                    value:'This is one demo~'
                },
                {
                    value:'This is tow demo~'
                }
                //.....
            ];
            this.data = data;
            this.$refs.vlist.onBottomLoaded();
        },
    },
    component:{
        VirtualList
    }
}

属性

事件

提示区状态说明

插槽