LangWenqi / lang-virtual-list-vue

vue虚拟列表

lang-virtual-list-vue

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

安装

通过 npm:

npm install lang-virtual-list-vue --save

基本使用

<template>
    <virtual-list
        :list-data="data"
        :estimated-item-size="100"
        v-slot="slotProps"
    >
        <div>
            {{ slotProps.item }}{{ slotProps.index }}
        </div>
    </virtual-list>
</template>

import virtualList from 'lang-virtual-list-vue'

export default{
    data(){
			return {
				data: [
					'This is mounted demo1',
					'This is mounted demo2'
				]
			}
    },
    component:{
        virtualList
    }
}

下拉刷新

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

import virtualList from 'lang-virtual-list-vue'

export default{
    data(){
        return {
					data: [
						'This is mounted demo1',
						'This is mounted demo2'
					]
				}
    },
    methods:{
        update(){
            let data = [
							'This is update demo1',
							'This is update demo2'
            ];
            this.data = data;
            this.$refs.vlist.onTopLoaded();
        },
    },
    component:{
        virtualList
    }
}

属性

参数	类型	默认值	是否必填	说明
listData	Array		✓	列表所需要的数据
height	String	100%		包裹元素的高度。
column	Number	1		列数
bufferScale	Number	1		在可见区域之外的上/下方预渲染比例，避免快速滑动时出现闪烁
estimatedItemSize	Number	150		列表项的预估高度，用于预先计算可视区域的显示项数
topLoadMore	Boolean	false		是否启用下拉刷新
topMethod	Function			刷新时调用的回调函数
topDistance	Number	70		触发 topMethod 的下拉距离阈值（像素）
maxDistance	Number	0		组件可移动的最大距离（像素），若为 0 则不限制
distanceScale	Number	2		手指移动与组件移动距离的比值
topTextColor	String	#000000		刷新区域的文本颜色
topPullText	String	下拉刷新		刷新状态为pull时提示区的文字
topDropText	String	释放更新		刷新状态为drop时提示区的文字
topLoadingText	String	加载中...		刷新状态为loading时提示区的文字
bottomLoadingText	String	加载中...		上滑加载更多状态为loading时提示区的文字

事件

事件名称	回调参数	说明
top-status-change	顶部刷新区域状态变更时触发	提示区域状态
onTopLoaded	绑定ref后下拉加载数据后手动触发	取消loading状态
onBottomLoaded	绑定ref后上滑加载数据后手动触发	取消loading状态

提示区状态说明

状态	说明
pull	开始拖拽，距离未达到topDistance
drop	距离达到 topDistance 释放触发 topMethod
loading	已被释放，topMethod 已经执行
none	刷新完成或未触发刷新动作

插槽

名称	说明	插槽Prop
default	默认插槽	item:列表项当前数据 row:当前项在整体中的行数 col:当前项在当前行中的列数
top	顶部提示区插槽	dargState:顶部刷新提示区的状态 dargDistance:顶部刷新提示区的距离