CocosCreator中ScrollView之动态更新的优化（比如：排行榜）

CocosCreator开发笔记(5)-ScrollView之动态更新的优化原理
浏览到这篇文章写的不错，对于开发游戏中的功能很有帮助。在此基础上有更新了一下代码：看上去更清晰一些。

cc.Class({
    extends: cc.Component,

    properties: {
        view: cc.Node,
        content: cc.Node,
        item: cc.Node,
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {
        this.interval = 10;//item之间的间隔
        this.count = Math.ceil(this.view.height / this.item.height);//单次生成
        this.totalCount = 100;//总数是100个
        this.content.height = (this.item.height + this.interval) * this.totalCount;
        
        //将生成的item加入到数组中
        this.items = [];
        for(let i = 0; i < this.count + 1; i++){
            newItem = cc.instantiate(this.item);
            newItem.parent = this.content;
            newItem.position = cc.v2(0,i * -(this.item.height + this.interval) - this.interval)
            newItem.getChildByName("label").getComponent(cc.Label).string = i + 1;
            newItem.active = true;
            this.items.push(newItem);
        }
        //初步定义阀值
        this.bufferZone = this.view.y + this.view.height / 2 + 100;

        //初始化当前content的坐标
        this.lastContentPosY = this.content.y;
        this.updateTimer = 0;
    },

    // 返回item在ScrollView空间的坐标值
    getPositionInView: function (item) {
        let worldPos = item.parent.convertToWorldSpaceAR(item.position);
        let viewPos = this.view.convertToNodeSpaceAR(worldPos);
        return viewPos;
    },

    update (dt) {
        this.updateTimer += dt;
        if (this.updateTimer < 0.01) {
            return; // we don't need to do the math every frame
        }
        this.updateTimer = 0;
        let items = this.items;
        // 如果当前content的y坐标小于上次记录值，则代表往下滚动，否则往上。
        let isDown = this.content.y < this.lastContentPosY;
        // 实际创建项占了多高（即它们的高度累加）
        let offset = (this.item.height + this.interval) * items.length;
        let newY = 0;
        
        // 遍历数组，更新item的位置和显示
        for (let i = 0; i < items.length; ++i) {
            let viewPos = this.getPositionInView(items[i]);
            if (isDown) {
                // 提前计算出该item的新的y坐标
                newY = items[i].y + offset;
                // 如果往下滚动时item已经超出缓冲矩形，且newY未超出content上边界，
                // 则更新item的坐标（即上移了一个offset的位置），同时更新item的显示内容
                if (viewPos.y < -this.bufferZone && newY < 0) {
                    items[i].y = newY;
                    let id = Number(items[i].getChildByName("label").getComponent(cc.Label).string);
                    items[i].getChildByName("label").getComponent(cc.Label).string = id - items.length;
                    //更新item中的一些内容，这里我测试item下面只有一个label
                }
            } else {
                // 提前计算出该item的新的y坐标
                newY = items[i].y - offset;
                // 如果往上滚动时item已经超出缓冲矩形，且newY未超出content下边界(目的是满足总数后不在进行交换)，
                // 则更新item的坐标（即下移了一个offset的位置），同时更新item的显示内容
                if (viewPos.y > this.bufferZone && newY > -this.content.height) {
                    items[i].y = newY;
                    let id = Number(items[i].getChildByName("label").getComponent(cc.Label).string);
                    items[i].getChildByName("label").getComponent(cc.Label).string = id + items.length;
                    //更新item中的一些内容，这里我测试item下面只有一个label
                }
            }
        }
        // 更新lastContentPosY和总项数显示
        this.lastContentPosY = this.content.y;
    },