Skip to content

Latest commit

 

History

History
136 lines (92 loc) · 4.88 KB

README_zh-CN.md

File metadata and controls

136 lines (92 loc) · 4.88 KB

lite-virtual-list

version last commit issues

English | 中文 | Example

基于vue的高性能虚拟列表组件库

  • 支持固定高度

  • 支持可变高度

  • 支持两栏瀑布流布局

  • 支持DOM多屏配置

  • 支持状态选择

  • 支持数据动态追加

  • 支持动态删除数据

用法

安装

npm install lite-virtual-list

使用

import liteVirtualList from "lite-virtual-list"

Vue.use(liteVirtualList)
<template>
  <lite-virtual-list type="fixed" :size="80" :remain="8" :data="items">
    <div slot-scope="{ item }" style="height: 80px">{{ item.value }}</div>
  </lite-virtual-list>
</template>
<script>
    let items = []
    let count = 1000
    for (let i = 0; i < count; i++) {
        items.push({ id: i, value: i })
    }
    export default {
        data() {
            return { items }
        }
    }
</script>

Props

Props Type Default Required Description
data Array [ ] ✓ 数据源,数据源中的每个item必须是一个对象, 每个item必须传入一个唯一id值 { id : Number | String },当type为waterfall时,每个item传入height字段 { height : Number | String },即每一项item的高度
type String ✓ type可指定三种类型 fixed variable waterfall fixed : item的高度为固定值 variable : item的高度根据内容撑起 waterfall : 瀑布流布局
remain Number | String ✓ 每屏可见的数据条数
size Number | String size是每一项item的高度。 当type为 fixed或 variable 时size为必传项。 type为variable时 size会被当做每一项的默认高度，当DOM渲染完成后会用真实高度替换此默认高度
screen Array [ 1 , 1 ] 可视区前后渲染的屏数。 默认值为[1,1],可视区前后各渲染一屏。 例：:screen="[2,3]" 表示可视区前面渲染两屏，可视区后面渲染三屏。
distance Number | String 50 页面滚动时触发loadMore回调的距离,默认为50
interval Number | String 0 scroll事件触发间隔,默认为0
virtualHieght String 100% 虚拟列表的高度,默认为100%。当type为fixed时，高度会根据size和remain属性动态计算出来，不用传入此值。当type为variable或 waterfall时，若不传入此属性，外部容器必须声明一个高度值。
unit String px 单位，默认为px
deleteId Number | String 动态删除某一项时需要传入当前项目的id值,当type为fixed时，不传deleteId,直接this.data.splice(index,1)删除也行,此时内部会动态计算高度
marginBottom Number | String 0 每项item的间隔距离。 此属性专门为type='waterfall'时提供,type为fixed或variable时此属性无效

Slot

 <lite-virtual-list >
   <!-- 默认slot,可拿到每个item数据 -->
   <template slot="default" slot-scope="{ item }" >
      <div>{{item.id}}</div>
   </template>

   <!-- 底部 -->
   <template slot="bottom">
     <div>加载中...</div>
   </template>
 </lite-virtual-list>

Event

scroll

页面滚动时触发

该回调会返回一个对象

当type为fixed或variable时,该对象包含以下 property :

  • scrollTop : 页面滚动的距离

  • renderScrollTop : 渲染区域距离页面滚动的距离

  • renderData : 滚动时渲染的数据

当type为waterfall时,该对象包含以下 property :

  • scrollTop : 页面滚动的距离

  • renderLeftScrollTop : 左列数据渲染区域距离页面滚动的距离

  • renderRightScrollTop : 右列数据渲染区域距离页面滚动的距离

  • renderLeftData : 左列滚动被渲染的数据

  • renderLeftData : 右列滚动时渲染的数据

domUpdateSuccess

DOM渲染到页面之后触发

当type为fixed或variable时,该回调会返回

renderData : 渲染到页面上的数据

当type为variable时,该回调会返回一个对象,该对象包含以下 property :

  • renderLeftData : 左列滚动被渲染的数据
  • renderLeftData : 右列滚动时渲染的数据

loadMore

页面滚动到底部时触发 ,可结合distance属性配置距离底部多远时触发此回调，默认为50

deleteSuccess

动态删除某一项item成功后会触发,该回调会返回当前被删除项数据