0.1.1 • Published 6 years ago
@bandaotiehe/virtual-list v0.1.1
VirtualList
说明
基于Vue的虚拟列表组件
props
| 名称 | 类型 | 默认值 | 说明 | 必须 |
|---|---|---|---|---|
| list | Array\<ListItem> | [] | 列表数据 | n |
| itemMinHeight | number | 30 | 列表项最小高度,在列表项还没渲染时作为高度使用 | n |
| throttleTime | number | 300 | 渲染列表计算间隔 | n |
| outsideRemain | number | 10 | 屏幕上下边缘外的列表项保留个数 | n |
slots
| 名称 | 位置 |
|---|---|
| before | 列表区域以上 |
| after | 列表区域以下 |
使用
注册
import Vue from 'vue'
import VirtualList from '@bandaotiehe/virtual-list'
Vue.component('VirtualList',VirtualList)用法1.使用list传入列表 (id必须)
//列表项
type ListItem={
id:number|string //唯一标识
render:()=>VNode //渲染函数
}<template>
<virtual-list :list="data" @scroll-end="loadData">
</virtual-list>
</template>用法2. v-for (key必须,use-slot)
<template>
<virtual-list use-slot>
<div v-for="i in 1000" :key="i">
</div>
</virtual-list>
</template>