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:顶部刷新提示区的距离|