用_localZOrder來改變ScrollView中Layout組件上子節點的順序

1)背景:

ABCD....這些item之間，我需要 在A和B之間插入X Y...等item；

這樣可以實現遊戲公告中，點擊一項後，展開自己的一些小項, 再點擊可以縮回這些項。

2) 實現:

game_scene.js

// 2項之間最多插入的節點數目
var maxChildNum = 100;

cc.Class({
    extends: cc.Component,

    properties: {
        scr_test: cc.ScrollView,
        item: cc.Prefab
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.init();
    },

    init: function(){

        // 先初始化10個大節點
        for(var i = 1; i <= 10; i++){
            var comp = cc.instantiate(this.item).getComponent("item");
            comp.setIndex(i);
            comp.setData(i * maxChildNum);
            this.scr_test.content.addChild(comp.node);
        }

    },

    /**
     * 展開第index個節點
     * @param index
     */
    openNode: function(index){
        var content = this.scr_test.content;

        var children = content.getChildren();

        var self = this;

        children.forEach(function (value, idx, arr) {
            var comp = value.getComponent("item");

            if(comp.index == index){

                // 插入3個
                for(var j = 1; j <= 3; j++){
                    var comp2 = cc.instantiate(self.item).getComponent("item");
                    comp2.setData(comp.data + j);
                    comp2.changeColor();
                    self.scr_test.content.addChild(comp2.node);
                }

                return;
            }
        });
    },


    /**
     * 關閉第index個節點
     * @param index
     */
    closeNode: function(){
        var content = this.scr_test.content;

        var children = content.getChildren();

        for(var i = children.length - 1; i >= 0; i--){
            var value = children[i];
            var comp = value.getComponent("item");
            if(comp.data % maxChildNum != 0){
                comp.node.removeFromParent();
            }
        }
    },


    start () {

        var self = this;
        self.openNode(1);
        self.openNode(3);

        var flag = false;
        this.schedule(function () {
            if(flag){
                self.openNode(1);
                self.openNode(3);
            }else{
                self.closeNode();
            }
            flag = !flag;
        }, 1);

    },


    // update (dt) {},
});

item.js

cc.Class({
    extends: cc.Component,

    properties: {
        colors: {
            type: cc.Color,
            default: []
        }
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {

    },

    setIndex: function(index){
        this.index = index;
    },

    setData: function(data){

        this.data = data;

        this.getComponent(cc.Label).string = data;

        this.node._localZOrder = data;

    },

    changeColor: function () {
        this.getComponent(cc.Label).node.color = this.colors[1];
    }

    // update (dt) {},
});

3)效果：

打開狀態(點擊100和300這個item，展開自己的項):

關閉狀態(關閉子項):

 

4)總結:

核心就是:更改節點的_localZOrder,讓layout替你實現自動排序.