as_virtual_list

简介

虚拟列表，适用于长列表渲染，减少dom节点渲染，提升性能

安装

npm install as_virtual_list

使用

// 单文件引入
import { VirtualListVue, VirtualListJsx } from 'as_virtual_list'
import 'as_virtual_list/dist/style.css'
const listData = ref(Array.from({ length: 100000 }).map((_, i) => ({ id: i, value: i })))

// 全局引入自动注册
import storyVirtualList from 'as_virtual_list'
import 'as_virtual_list/dist/style.css'
app.use(storyVirtualList)
// 或手动引入
import { VirtualListVue, VirtualListJsx } from 'as_virtual_list'
import 'as_virtual_list/dist/style.css'
app.component('VirtualListVue', VirtualListVue)
app.component('VirtualListJsx', VirtualListJsx)
// 使用
<VirtualListVue style="height: 60vh" :data="listData" :itemSize="100"> </VirtualListVue>
// jsx
<>
<VirtualListJsx style='height: 49vh' data={listData.value} itemSize={100}>
  {{
    default: ({ item }) => <div>item:{JSON.stringify(item, null, 2)}</div>,
  }}
</VirtualListJsx>
</>

API

| 属性名 | 说明 | 类型 | 默认值 | | :------: | :----------: | :----: | :----: | | data | 数据 | Array | [ ] | | itemSize | 每项数据占据 | Number | 100 | | itemSize | 每项数据占据 | Number | 100 |

Events

| 事件名 | 说明 | 参数 | | :----: | :------: | :---------------: | | scroll | 滚动事件 | Function(e:event) |

Slots

| 插槽名 | 说明 | 参数 | | :-----: | :------: | :------------: | | default | 默认插槽 | Function(item) |

Exposes

| 事件名 | 说明 | 参数 | | :----------: | :----------------------------: | :--------------------: | | setScrollTop | 手动设置滚动条到顶部的距离设置 | Function(value:Number) |