[免费开源] 分享一个个人用的比较舒服的虚拟列表

在论坛上找了几个虚拟列表,感觉都是不太满足项目需求。

一开始自己参照fairygui写了这个项目。

后面叫Codex进行了优化和测试。

用的版本是3.8.6

仓库地址: https://github.com/xixi-chen/virtual_list

在线预览: https://xixi-chen.github.io/virtual_list_preview/index.html

这个组件解决了什么

  • 大数据量列表只渲染可视区域,降低创建和更新开销

  • 支持可变尺寸 item(高度/宽度动态)

  • 支持循环列表(loop)和分帧创建

  • 支持单列、单行、多行多列、分页布局


核心能力

  • 虚拟列表渲染:SingleColumnSingleRow、Flow、Pagination

  • 循环模式(loop)

  • 分帧创建模式(frame-by-frame)

  • setItemRenderer / setItemProvider / setItemSizeProvider 回调体系

  • 嵌套列表、聊天列表、下拉刷新场景示例


Demo 场景(仓库内已提供)

  1. virtual_single(虚拟列表)

  2. virtual_cols_rows(多行多列)

  3. virtual_page(分页)

  4. virtual_loop(循环列表)

  5. virtual_frame_by_frame(分帧创建)

  6. nested(列表嵌套)

  7. chat(聊天)

  8. pull_refresh(下拉刷新)

  9. align(对齐)


快速使用

  1. Cocos Creator 3.8.6 打开项目

  2. 在带 ScrollView 结构的节点上挂载 VList

  3. 设置默认 item

  4. 绑定渲染/类型/尺寸回调

  5. 设置 numItems


this.vList.setItemRenderer(this, (index, item) => {

  // 渲染 item UI

});

this.vList.setItemProvider(this, (index) => {

  // 可选:返回 item 类型 key

  return "default";

});

this.vList.setItemSizeProvider(this, (index) => {

  // 可选:动态尺寸

  return { width: 200, height: 100 };

});

this.vList.numItems = 1000;


适合哪些项目

  • 聊天、消息流、背包、商城、任务列表等长列表 UI

  • item 尺寸变化频繁的界面

  • 对滚动手感和稳定性要求较高的移动端项目


欢迎反馈

如果你在项目里用了它,欢迎反馈体验和边界 case。

如果发现问题,建议附上:场景名 + 操作路径 + 预期/实际表现,我会更快定位。

也欢迎直接提 PR 一起完善。

如果这个项目对你有帮助,欢迎点个 Star,感谢支持 :raised_hands:

3赞

不错,学习学习

体验了下,只要涉及横向滑动滑倒最后就会出现回到列表开头的问题,虚拟列表除外。由于是线上体验加载帧率就不提了。

可否截个图,我去训斥一下codex

你自己可以试试,虚拟列表除外所有的横向滑动滑倒最后image

(帖子被作者删除,如无标记将在 24 小时后自动删除)


确实如此,一直往右拖动就会回到开头;

除此之外,循环列表横向往左慢慢拖动,发现没有立刻显示子项,而是拖了一段距离后突然显示出来