更新记录

0.0.1（2025-08-16） 下载此版本

init

平台兼容性

uni-app(4.11)

uni-app x(4.07)

CustomVirtualList 自定义虚拟列表组件

一个基于uni-app scroll-view实现的高性能虚拟列表组件，适用于显示大量数据的场景。

特点

• 基于scroll-view组件，保留其所有原生功能
• 虚拟渲染，只渲染可视区域内的列表项，大幅提升性能
• 支持动态数据更新
• 支持自定义列表项样式
• 支持下拉刷新和上拉加载更多

使用方法

引入组件

import CustomVirtualList from '@/components/custom-virtual-list/list.vue';

export default {
  components: {
    CustomVirtualList
  }
}

基础用法

<custom-virtual-list
  :data="listData"
  :item-height="80"
  :buffer-size="5"
  scroll-y
>
  <template v-slot="{ item, index }">
    <view class="list-item">
      <text>{{ index + 1 }}. {{ item.title }}</text>
    </view>
  </template>
</custom-virtual-list>

带下拉刷新和上拉加载更多

<custom-virtual-list
  :data="listData"
  :item-height="80"
  :buffer-size="5"
  scroll-y
  :refresher-enabled="true"
  :refresher-triggered="isRefreshing"
  @scrolltolower="loadMore"
  @refresherrefresh="refresh"
>
  <template v-slot="{ item, index }">
    <view class="list-item">
      <text>{{ index + 1 }}. {{ item.title }}</text>
    </view>
  </template>
</custom-virtual-list>

属性

除了以上属性外，组件还支持scroll-view的所有原生属性，如：

事件

除了以上事件外，组件还支持scroll-view的所有原生事件，如：

插槽

注意事项

1. 列表项高度必须是固定的，否则可能导致渲染错位
2. 为了获得最佳性能，建议设置合适的buffer-size值，不宜过大或过小
3. 在App平台的nvue页面中，建议使用原生的list组件，性能更佳
4. 如果列表项高度不固定，可能需要更复杂的实现方案

示例

请参考 example.vue 文件查看完整使用示例。