这是一个基于Cocos Creator写的虚拟列表组件。本组件是配合Cocos Creator本身的滚动窗结构去写的，所以在编辑器中操作会很方便，所见即所得。

在线DEMO：

https://gh-kl.github.io/cocoscreator-list/web-mobile/index.html

https://gh-kl.github.io/cocoscreator-list/web-mobile-chat-list/index.html

Cocos论坛帖子链接：

https://forum.cocos.com/t/dc/79055

• 所有类型布局。（单列、单行、网格，甚至各种花式RIGHT_TO_LEFT、BOTTOM_TO_TOP）
• 分帧渲染。
• 选择模式。（单选、多选）
• 滑动模式。（普通、粘附、分页）
• 自定义Item的宽/高。（用来做聊天列表再适合不过）
• 动态删除Item项。
• ...

Last test by ccc_v2.1.2

1. 在编辑器中，创建一个ScrollView（也就是ScrollView->Mask->Content这样层级结构的节点！）。
2. 将 List 组件挂载到ScrollView节点上。
3. 设置模板Item，选择 TemplateType ，可切换模板类型，请按需选择。
4. 设置滑动模式（ SlideMode ）， NORMAL=通常 ， ADHERING=粘附 ， PAGE=分页 ，三选一。
5. 设置是否为虚拟列表（ Virtual ），默认为 true ，意思是仅在可视范围内渲染 Item 。反之，如果为 false ，则会渲染所有数量的Item，一般不推荐这么做，但凡事总有个万一，所以预留了。
6. 可选设置逐帧渲染（ FrameByFrameRenderNum ），该数量为每帧渲染的数量。
7. 设置渲染器（ RenderEvent ），在View中写一个函数，将该函数指向RenderEvent，运行时，设置List数量，Item将会通过该函数进行回调，开发者在该函数中实现Item的刷新。
8. 可选设置选择模式（ SelectedMode ），选择模式有 SIMPLE（单选） 、 MULT（多选） 两种模式，须与 ListItem 组件搭配使用， ListItem 组件需要拖拽到模板Item上。在View中写一个函数，将该函数指向 SelectedEvent ，运行时，当选择变更，将会通过该函数回调。

在View中，若是单选模式，用 list.selectedId=Number 来改变当前选择。若是多选模式，则调用 list.setMultSelected(args, boolean) 接口来设置多选数据。

9. 完成以上设置后，在View中调用 list.numItems=Number 设置列表数量，本组件就会通过渲染器（即 RenderEvent ）进行回调了！

1. 每一个 Item-Node 都会被赋值一个 _listId ，即该 Item 在 List 中的 下标 。假如你的 Item 的 childrens 中，有一个 按钮 ，在 按钮 的 回调事件 中，通过 event.target.parent._listId 就能取得该 Item的下标 了，这非常方便。 TS版 比较特殊， _listId 保存在 ListItem 组件中，可以通过 item.getComponent('ListItem').listId 来获得。
2. 在View中设置 list.customSize 以达到每个Item宽度或高度不一样的虚拟列表效果，简直美滋滋！但这个会耗费更多性能！仅支持虚拟列表！仅支持单列或单行！

1. 本组件所依赖的ScrollView节点、Mask节点以及Content节点，这三个节点的锚点需要按方向去设置。比如从顶到底单列排列，就需要设置锚点为（0.5, 1）。如果是从左到右网格排列，就需要设置锚点为（0, 1）。始终将锚点设置到首个Item那一边。
2. TS 版， Item 必须要挂载 ListItem 组件。（因为 TS 不能随意给 Node 赋值变量，但 Item-Node 必须要记录一个 listId ）。
3. 理论上设为虚拟列表后不可再设回普通列表（即 virtual 属性）。
4. SlideMode设为 ADHERING（粘附） 或 PAGE（页面） 后，组件将强行屏蔽惯性滚动。

• 新增 TestCustomSize 场景例子，着重演示如何用本组件实现 聊天列表 。
• 优化局部代码，提升一丁点效率。
• 将 updateAppointed 接口更名为 updateItem 。
• 新增 updateAll() 接口。

• 新增 LakeCenter 属性。当该属性为 true ，Item数量过少时，会居中显示所有Item。（不支持 GRID 布局）
• 新增 calcCustomSize 接口，方便开发者计算 CustomSize 。（如果模板Item的结构较复杂，建议还是在外部自行计算）
• 修复反方向布局，Item数量过少时，会向正方向对齐的BUG。

• 滑动模式新增 PAGE 模式，用来做分页效果，可自定义翻页滑动响应距离（ pageDistance ）。建议不要再用 ADHERING 模式去实现分页效果。关于 PAGE 模式下的接口： list.prePage(timeInSecond) 、 list.nextPage(timeInSecond) 、 list.skipPage(pageNum, timeInSecond) ，分别是上一页、下一页、跳转到指定页数。
• 优化效率。

• 新增TS版本。

• 优化效率。

• 修复滑动模式为吸附（ADHERING）时，还未吸附到目标点时，点击滚动窗，再松开，会吸附失败的BUG。
• 独立吸附接口 list.adhere() ，可外部调用，不限滑动模式。

• 支持 BOTTOM_TO_TOP ， RIGHT_TO_LEFT 布局。需要注意：各种反方向排列的布局（ BOTTOM_TO_TOP 、 RIGHT_TO_LEFT ）都会有问题（item数量过少，就会导致Content错位），这个是官方问题。而本组件是配合 cc.ScrollView 去写的，所以也不支持，待官方后续优化（Last test by Creator_v2.1.1）。如果Item数量很多，那么可以使用。

• 单列布局时支持自定义指定Item的height。单行布局时支持自定义指定Item的width。通过 list.customSize = {0:100, 1:130, 5:120, ...} 来设置，其中key为Item的ID，value为height/width，没有找到该Item的customSize将会与模板ItemSize一致。

• 新增List的配套组件---- ListItem 。
• 新增选择模式。

• 新增带动画删除Item接口 list.aniDelItem(id, callFunc, aniType) ，因本组件毕竟还是数据驱动，所以请务必在callFunc中删除数据数组中相应下标的数据，然后手动更新该list（即 list.numItems=Number ）。