前言
本文使用的组件为VList实用高效虚拟列表组件，获取地址：VList实用高效虚拟列表
此组件在满足日常开发需求的前提下，编辑器属性均由中文标识，且支持编辑器实时预览，在编写业务代码时也提供了便捷详尽的接口以供控制列表的刷新和滚动，非常适合开发虚拟列表。
基本组件开发
简单列表
- 在层级面板右键创建空节点（注意要在Canvas或其子节点下创建，否则没有UITransform组件），并挂载VList组件
- 在list节点下创建item子项节点，并在需要赋值渲染的子节点前加上"_"前缀（此前缀可在VList的【列表组件前缀】字段中更改）
- 将item从层级面板拖拽至资源管理器作为预制体，随后将此预制体赋值给VList中的【列表项预制体】字段，然后删除层级面板中的item
- 设定预览数量和调节尺寸以及伸展，对齐等布局设置，将子项整体布局调整到合适的配置。在调整过程中，VList将自动管理ScrollList和View等组件以及控制它们的属性与VList对齐。
- 在代码中先调用VList的init方法，传入对子项的生命周期方法（如onData，onShow，onInstantiate等方法），然后在合适的时机调用setData方法传入列表数据。
- 一个完整的带数据驱动的列表组件就做好了
嵌套列表
- 在一级列表项下以同样的方法创建二级列表，以及二级列表的列表项（注意二级列表属于一级列表的列表项组件，所以节点名也要加上前缀）
- 回到一级列表，点击一级列表的【刷新列表项组件】，列表项组件全览将会递归展示子项所有的关键组件
- 修改代码，定义一级列表和二级列表的列表项数据，其中一级列表的每一项都包括了二级列表的数据。在一级列表的init方法中的onInstantiate回调中初始化二级列表，其他保持不变。传入一级数据时二级列表的数据也一并传入了
- 一个带数据驱动的完整嵌套列表就完成了（由于列表项中的子列表不会被拆散分层渲染，所以如果子列表不需要滚动，则使用Layout模式，否则会因为mask打断合批
背包开发
此处背包开发采用页面列表嵌套layout列表的方式实现
- UI准备，主要分为3块：详情面板，索引器和列表项
- 单页layout列表配置（由于单页固定网格行列，将预览数量拉到可见的最大值）
- 创建grids空节点并挂载VList脚本
- 调整尺寸
- 列表类型->Layout
- 列表项预制体->第一步中准备的slot预制体
- 预览数量->30（在编辑器预览时中最为合适）
- 水平伸展->ExpandFixed
- 垂直伸展->Overflow
- 垂直间距->11.2（在编辑器预览时最为合适）
- 列数->5（在编辑器预览时最为合适）
- 该节点制作为预制体
- 删除场景中的grids节点示实例
- 多页翻页列表配置
- 创建pages空节点并挂载VList脚本
- 列表类型->Pages
- 列表项预制体->第2步创建的grids节点预制体
- 点击：页面参数->贴合页面尺寸(即将页面列表的尺寸与单页列表项的尺寸保持一致)
- 设置预览数量1~3（确保单页在页面列表中正常布局）
- 滚动方向->Horizontal（修改后伸展模式的参数会自动变更）
- 列表控制代码初步编写
- 定义页面列表数据和单页数据结构
- 对页面列表的引用以及init初始化
- 在页面列表的onInstantiate对每页的网格列表进行初始化（initSlotGrid）和在onData中对每页的网格列表进行数据传入
- 对单页的网格列表进行init初始化，在onData中定义每格物品的渲染方法，在onClick中定义每格物品的选中行为
- 物品栏渲染定义，选中行为部分代码实现（是否选中和是否装备都需要记录一个全局的物品栏索引slotIdx，和页面索引pageIdx以及在列表中的条目索引gridIdx进行转换）
- 实现 gridIdx，pageIdx到slotIdx的转换
- 在initSlotGrid中对每页物品栏列表的初始化中的onData渲染函数里实现（在VList属性面板中的列表项组件全览中记录下所有的关键节点名，即节点名带有"_"前缀的节点，并根据这些节点名作为key通过info.get或info.getNode方法速查到节点并且赋值）
- 在onClickSlot中实现选中行为
- 物品详情面板，装备按钮的行为代码实现
- 在onLoad中注册装备按钮的点击事件
- 在refreshDetailPanel中实现详情面板的渲染代码
- 在onClickEquip中实现装备行为的代码，与onClickSlot代码结构类似
- 页面索引器，翻页动作代码实现
- 在onLoad中注册页面列表的滑动翻页事件，注册左翻按钮和右翻按钮的点击事件
- 在refreshIndicator实现索引器行为，包括索引数字更新，左翻按钮和右翻按钮的启用和禁用
- 接入生命周期，构造数据，启动列表，传入数据
- 在start方法中初始化列表
- 初始化列表后构造并传入数据，驱动列表渲染
- 运行预览，一切ok
更多案例
更多案例和工程见cocos store
demo工程及组件源码获取：VList实用高效虚拟列表
希望开发虚拟列表这件事不再成为广大开发者的头疼业务，背包，排行榜，商城，通行证，签到等界面挥手就来！
