VList简介
游戏UI界面开发神器！旨在解决开发虚拟列表时反复创建脚本，调整各个节点和参数等操作繁琐的问题，仅通过一个节点和一个脚本即可完成虚拟列表组件功能的开发，大大提高虚拟列表组件的开发效率。且后续会陆续扩展更多功能。
cocos store地址：VList实用高效虚拟列表
功能亮点
- 涵盖在大多数情况下对虚拟列表的功能和性能需求！数据驱动，对象池化，分页，布局选项，分层渲染，动态删减，滚动关联等常用功能一应俱全！
- 清晰充分的组件参数，释义不含糊，分组整理归纳，快速定位到相关配置予以快速调整！
- 编辑器预览特别支持！一键切换Layout，Scroll，Page模式，ScrollView和View等组件和参数自动管理和调整，尺寸自动适配，在编辑器中实时预览调整列表项的布局！只在单个节点操作即可高效完成整个列表的调整与配置！
- 面向业务设计的全面详细的操作接口，条目节点与控件均可速查，无需创建多个对象脚本翻覆梳理，初始化时即可完成对列表项的生命周期和输入监听的全面控制，在任意时刻均可安全对任意条目和数据进行增删改查，放心把关键数据从业务侧分离交由VList管理！
主要API
事件
事件通过对列表所在节点进行注册和监听，示例如下：
var list:VList = this.getList();
list.node.on(VListEvent.OnLayout,this.onLayout,this);
list.node.off(VListEvent.OnScrolling,this.onScrolling,this);
- VListEvent.OnScrolling - 滚动和定位时触发
- VListEvent.OnLayout - 元素重新布局时触发
- VListEvent.OnResize - 该节点尺寸更改时触发
- VListEvent.OnTurnPage - 页面变更时触发（仅page模式下有效）
- VListEvent.OnFinishPage - 页面吸附完毕时触发（仅page模式下有效）
数据模型
ILayoutInfo列表实时布局信息
- col:number - 运行时实际列数
- row:number - 运行时实际行数
- size:Size - 布局实际尺寸（即包括留白的列表项包围盒尺寸）
- boundSize:Size - 最小包围盒尺寸（即不包括留白的列表项包围盒尺寸）
- spaceX:number - 实际横向间隔
- spaceY:number - 实际纵向间隔
- num:number - 有效列表项数量（编辑器预览用，运行时可忽略此属性）
生命周期回调签名
type VCallback = (info: IVListItemInfo) => void
IVListItemHooks列表项生命周期回调
- onInstantiate?:VCallback - 当子项节点首次被实例化时调用
- onDestory?:VCallback - 当子项节点被清理时调用
- onData?:VCallback - 当子项触发刷新渲染时调用
- onShow?:VCallback - 当子项节点移入视口时调用
- onHide?:VCallback - 当子项节点移出视口时调用
- onUpdate?:VCallback - 当子项显示时每帧调用
- onClick?:VCallback - 当子项节点被点击时调用
IVListItemInfo列表项核心信息
- idx:number - 当前列表项所在列表中的索引
- data:any - 当前列表项被分配的数据对象
- node:Node - 当前列表项引用的显示节点（当该列表被隐藏时，node为null）
- isInLayout:boolean - 当前列表项是否参与布局，默认是，仅供外部修改，若设置为false，则保留当前状态，不再进行可见性检测和位置布局
- isVisible:boolean - 当前列表项是否可见
- get(key:string,ctor:new()=>Component):Component - 子组件速查句柄，通过key（带特殊前缀的节点全名）直接获取列表项渲染节点中对应的组件，仅在node不为空时可用
- getNode(key:string):Node - 子节点速查句柄，通过key（带特殊前缀的节点全名）直接获取列表项渲染节点的子节点
- call:(cb:VCallback,onlyNow?:boolean):void - 安全操作句柄，当onlyNow为true时，若当前该列表项不可见，则不进行任何操作，可见时执行cb；当onlyNow不传或为false时，若当前该列表项不可见，则将cb推迟到列表项可见时执行，若当前列表项可见，则立即执行cb
属性
- infos: IVListItemInfo[] - 【只读】获取当前列表项信息数组，对列表操作的关键数据对象
- datas: any[] - 【只读】获取当前列表数据数组，元素成员可在刷新前进行修改
- cb:IVListItemHooks - 列表项生命周期回调（更改只影响后续调用）
- pageCnt:number - 【只读】横向翻动或纵向翻动总数量，由列表项数量决定，仅适用于一维滚动页面列表，否则返回-1
- pageIdx:number - 【只读】当前页面索引，仅适用于一维页面列表，二维页面索引请参考getLocation()方法，要定位到页面索引请参考focus()和locate()方法
- curPageInfo:IVListItemInfo - 当前页面信息，仅适用于一维滚动页面列表
方法
生命周期
- init(itemCallback:IVListItemHooks):void - 初始化方法
- clearAll():void - 清空列表数据和回调以及注册信息
- clearList():void - 清空列表数据
坐标转换，布局和列表定位
- lp2wp(lp:Vec3):Vec3 - 将content坐标系下的本地坐标lp转为世界坐标并返回
- wp2lp(wp:Vec3):Vec3 - 将世界坐标wp转为content坐标系下的本地坐标并返回
- idx2crd(idx:number):Vec2 - 将列表项索引idx转换为该列表项在布局中的二维坐标（左上为原点）并返回
- crd2idx(crd:Vec2):number - 将列表项在布局中的二维坐标crd转换为该列表项的索引并返回
- getVec():Vec2 - 返回当前列表中心聚焦的位置在整个布局中的偏移向量（以realItemSize.xy+layout.spaceXY为单位）
- getLocation():Vec2 - 返回当前列表中心所落在列表项在整个布局中的二维坐标
- getFocus():number - 返回当前列表中心所落在的列表项的索引
- locate(crd:Vec2,time?:number,endCallback?:Function):void - 在time时间内定位并聚焦到布局坐标为crd的列表项，结束后调用endCallback，若time不传则立即完成操作
- focus(target:Location,time?:number,endCallback?:Function):void - 在time时间内定位并聚焦到索引或方位为target的列表项，结束后调用endCallback，若time不传则立即完成操作
type Location = number | “Top” | “Bottom” | “Left” | “Right” | “Start” | “End”;
- turnPrevious(time:number=0.4,isLoop:boolean = false):void - 在time时间内翻到上一页，若isLoop为true且当前为首页，则翻到最后一页
- turnNext(time:number=0.4,isLoop:boolean=false):void - 在time时间内翻到下一页，若isLoop为true且当前为最后一页，则翻到首页
- getPosInfo(idx:number):Rect - 返回索引为idx的列表项在布局中的Rect信息（此方法与列表项可见性无关）
- isOutOfScroll():boolean - 返回列表滚动是否超出边界
数据操作和刷新
- sort(compare:(a:IVListItemInfo,b:IVListItemInfo)=>number):void - 对列表按照compare规则进行排序并刷新
- setData(data:T[],ignoreReset:boolean = false):void - 对列表传入data数据列表并立即执行渲染刷新，若ignoreReset为true则列表刷新后将滚动到一开始的位置，否则不滚动
- addData(data:T,insertIdx:number|null=null):boolean - 安全地向列表中insertIdx位置插入数据data并刷新，若insertIdx为null则在列表末尾插入。如果返回false，则表示该插入和刷新操作需等待exePromise后完成，否则表示操作立即完成
- deleteIdx(idx:number):boolean - 安全地向列表中删除索引为idx的数据和列表项，如果返回false，则表示该操作需等待exePromise后完成，否则表示操作立即完成
- deleteData(data:T):boolean - 安全地向列表中删除数据为data的列表项，如果返回false，则表示该操作需等待exePromise后完成，否则表示操作立即完成
- exePromise():Promise - 返回等待所有操作执行完毕的promise（一帧延迟）
- refreshItem(idx:number,onlyNow:boolean=true):void - 刷新索引为idx的列表项，若onlyNow为true，则仅在指定列表项此时可见时立即执行，此时不可见则不作处理；若onlyNow为false，则推迟到指定列表项可见时处理
- refreshList():void - 刷新列表
事件注册
- register(key:string,nodeEvent:string,func:VCallback,target?:any):void - 为列表中所有列表项速查名为key的子节点并注册事件{nodeEvent,func,target}，当key为""时为列表项渲染节点本身注册事件。该方法将保证事件触发时得到的实参数据与触发的列表项正确对应，注意VList不支持同一个节点同一个event注册多个回调
- unregister(key:string,nodeEvent):void - 为列表中所有列表项速查名为key的子节点并注销事件nodeEvent
- getChildByPath(node:Node,path:string):Node - 等同于node.getChildByPath(path)，但在分层模式中列表项结构被打散后依然可用
最后
如果您还在为列表开发过程不清晰，组件调整繁琐，布局参数效果预览很不方便，事件注册蹩脚，业务代码杂乱冗余不统一等问题困扰，不妨试试这款组件！能极大的提高您的开发效率！
cocos store地址：VList实用高效虚拟列表
demo体验地址：https://foraland.github.io/VList_Demo
视频预览地址：【游戏开发组件】游戏开发神器！cocos creator3.8VList虚拟列表组件来啦！这可能是你用过的最简便高效的虚拟列表组件！_哔哩哔哩_bilibili
