cocos creator + TypeScript 解决ScrollView加载大量Item导致卡顿的问题

---

1、引言

  我们在平常的开发中常常碰到列表类的数据处理！典型的像玩家列表这种可能数量非常庞大，可能有几百个！我们假设一次全部创建可能一下子就导致app安顿崩溃！下面我们带着问题一起分析。

2、问题分析

  点击这里查看上一篇Unity的相关介绍。这里就不再做详细分析了。

3、代码部分

/**
 * 滑动方向枚举
 */
export enum ScrollDirEnum {
    Vertical,
    Horizon
}

const {ccclass, property} = cc._decorator;

@ccclass
export default class UIScrollControl extends cc.Component {


    /** 滑动框体 - UI组件 */
    private scroll_rect:cc.ScrollView

    /** 可见区域大小 */
    private _show_area_size:cc.Size

    /** 滑动方向 */
    private dir:ScrollDirEnum

    /** 总共数量 */
    private total_count:number

    /**实际创建的item数量 */
    private total_show_item_count: number;

    /** 滑动子对象 - 列表 */
    private all_child_list:Array<cc.Node> = new Array<cc.Node>()

    /** item之间的间距 */
    private distance:number = 0

    /** content初始大小 */
    private start_content_size:cc.Size;

    /**标识 */
    private is_start:boolean = false

    private maxIdx:number = 0;

    /** 刷新回调 */
    private refreshCallBack:Function

    /**
     * 初始化控制
     * @param _temp_node 克隆对象
     * @param _total_count 成员总数
     * @param _size Item水平或竖直方向的距离
     * @param _dir 滑动方向
     * @param callBack 刷新回调
     */
    initControl(_temp_node:cc.Node,_total_count:number,_size:cc.Size,_dir:ScrollDirEnum,callBack:Function):void
    {

        if(callBack)
        {
            this.refreshCallBack = callBack
        }
        
        if (this.is_start == false)
        {
            this.scroll_rect = this.node.getComponent(cc.ScrollView);
            if (this.scroll_rect == null || this.scroll_rect.content == null)
            {
                cc.log("ScrollRect组件错误");
                return;
            }

            this.scroll_rect.content.parent.setAnchorPoint(cc.v2(0.5,0.5))
            let _mask_widget:cc.Widget = this.scroll_rect.content.parent.getComponent(cc.Widget)

            if(_mask_widget == null)
            {
                _mask_widget = this.scroll_rect.content.parent.addComponent(cc.Widget)
            }

            //上下左右对齐边界
            _mask_widget.isAlignLeft = true