CocosCreatorでリストを作成する方法

CocosCreatorでリストを作成する方法

CocosCreator バージョン: 2.3.4

Cocos には List コンポーネントがないため、自分で記述する必要があります。 cocos サンプル プロジェクトから、assets/case/02_ui/05_listView のデモを見つけて変更します。

垂直レイアウト、水平レイアウト、グリッドレイアウト、パディングリストを使用して仮想リストを作成します。

デモアドレス: https://files-cdn.cnblogs.com/files/gamedaybyday/cocos2.3.4_ListViewDemo_Grid.7z

cocos のオリジナルの LayOut はリストを作成し、100 個のデータに対して 100 個のインスタンスが存在します (左図)。

仮想リストには、表示されているインスタンスのみが存在し、スクロールするとそれらがリサイクルされます。 (右の写真)

リストの使い方

使用方法は、ScrollView に List コンポーネントを追加することです。

List のアイテム リスト項目はコンテンツの直下に配置され、List コンポーネントに割り当てられます。Item は、データの更新のために ItemRender から継承されたオブジェクトを追加する必要があります。

コード内のリストのデータを設定する

//ランキングデータを設定します。let rankData = [];
 (i=0;i<100;i++とします){
      rankData.push({rank:i, name:"name"});
}
 
ランクリストにデータを設定します。

ソースコード

// TypeScript を学ぶ:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// 属性を学習:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// ライフサイクルコールバックを学ぶ:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
 
「./ItemRender」からItemRenderをインポートします。
 
const { ccclass, property } = cc._decorator;
 
/**リスト配置方法*/
エクスポート列挙型ListType {
    /**水平配置*/
    水平 = 1、
    /**垂直配置*/
    垂直 = 2、
    /**グリッド配置*/
    グリッド = 3
}
 
/**グリッドレイアウトの方向*/
エクスポート列挙体StartAxisType {
    /**水平配置*/
    水平 = 1、
    /**垂直配置*/
    垂直 = 2、
}
 
/**
 * リスト * cocos_example の listView に基づいて変更 * @author chenkai 2020.7.8
 * @例
 * 1. Cocos ScrollViewコンポーネントを作成し、リストを追加して、リストのプロパティを設定します。* 
 */
@ccクラス
デフォルトのクラスListをエクスポートし、cc.Componentを拡張します。
 
    //====================== プロパティ パネル==========================
    /**オプションの一覧*/
    @property({ type: cc.Node, tooltip: "リスト項目" })
    パブリック itemRender: cc.Node = null;
 
    /**配置方法*/
    @property({ type: cc.Enum(ListType), tooltip: "配置方法" })
    パブリック タイプ: ListType = ListType.Vertical;
 
    /**グリッドレイアウトの方向*/
    @property({ type: cc.Enum(StartAxisType), tooltip: "グリッドレイアウトの方向", visible() { return this.type == ListType.Grid } })
    パブリック startAxis: StartAxisType = StartAxisType.Horizo​​ntal;
 
    /**リスト項目間のX間隔*/
    @property({ type: cc.Integer, tooltip: "リスト項目 X 間隔", visible() { return (this.type == ListType.Horizo​​ntal || this.type == ListType.Grid) } })
    パブリックスペースX: 数値 = 0;
 
    /**リスト項目間の Y 間隔*/
    @property({ type: cc.Integer, tooltip: "リスト項目の Y 間隔", visible() { return this.type == ListType.Vertical || this.type == ListType.Grid } })
    パブリックスペースY: 数値 = 0;
 
    /**上部の間隔*/
    @property({ type: cc.Integer, tooltip: "上部の間隔", visible() { return (this.type == ListType.Vertical || this.type == ListType.Grid) } })
    パブリック padding_top: 数値 = 0;
 
    /** 下部のスペース */
    @property({ type: cc.Integer, tooltip: "下部の間隔", visible() { return (this.type == ListType.Vertical || this.type == ListType.Grid) } })
    パブリック padding_buttom: 数値 = 0;
 
    /**左間隔*/
    @property({ type: cc.Integer, tooltip: "左間隔", visible() { return (this.type == ListType.Horizo​​ntal || this.type == ListType.Grid) } })
    パブリック padding_left: 数値 = 0;
 
 
 
    @property(cc.Integer)
    パブリック_padding: 数値 = 0;
 
    /**右スペース*/
    @property({ type: cc.Integer, tooltip: "右間隔", visible() { return (this.type == ListType.Horizo​​ntal || this.type == ListType.Grid) } })
    パブリック padding_right: 数値 = 0;
 
    //======================= スクロール コンテナー===============================
    /**リストスクロールコンテナ*/
    パブリックスクロールビュー: cc.ScrollView = null;
    /**scrollView コンテンツ コンテナ*/
    プライベートコンテンツ: cc.Node = null;
 
    //======================== リスト項目===========================
    /**リスト項目データ*/
    プライベートitemDataList: Array<any> = [];
    /**作成するインスタンスの数*/
    プライベートspawnCount: 数値 = 0;
    /**リスト項目インスタンスを格納する配列*/
    プライベートitemList: Array<cc.Node> = [];
    /**アイテムの高さ*/
    プライベートitemHeight: number = 0;
    /**アイテムの幅*/
    プライベートitemWidth: 数値 = 0;
    /**使用されなくなったリスト項目を保存する*/
    プライベートitemPool: Array<cc.Node> = [];
 
    //======================== 計算パラメータ===========================
    /**scrollView の中心からの距離。この距離を超えるアイテムはリセットされます。この距離のアイテムは scrollView の表示範囲をわずかに超えるため、通常は scrollVIew.height/2 + item.heigt/2 + space に設定されます。*/
    プライベート halfScrollView:number = 0;
    /** 前のコンテンツの X 値は、現在のコンテンツの X 値と比較して、左にスクロールするか右にスクロールするかを決定するために使用されます */
    プライベートlastContentPosX: 数値 = 0;
    /** 前のコンテンツの Y 値は、現在のコンテンツの Y 値と比較して、上にスクロールするか下にスクロールするかを決定するために使用されます */
    プライベートlastContentPosY: 数値 = 0;
    /**グリッド行数*/
    プライベートgridRow: 数値 = 0;
    /**グリッド列の数​​/
    プライベートgridCol: number = 0;
    /** 更新時間、単位 s */
    プライベート updateTimer: 数値 = 0;
    /** 更新間隔、単位 s */
    プライベート更新間隔: 数値 = 0.1;
    /**コンテナをスクロールするかどうか*/
    プライベートbScrolling: ブール値 = false;
    /**リフレッシュ関数*/
    プライベート updateFun: Function = function () { };
 
    オンロード() {
        this.itemHeight = this.itemRender.height;
        this.itemWidth = this.itemRender.width;
        cc.ScrollView コンポーネントを取得します。
        this.content = this.scrollView.content;
        this.content.anchorX = 0;
        this.content.anchorY = 1;
        すべての子供を削除します。
        this.scrollView.node.on("スクロール中", this.onScrolling, this);
    }
 
    /**
     * リストデータ(リストデータはコピーして使用します。リストデータが変更された場合は、データをリセットする必要があります)
     * @param itemDataList アイテムデータリスト */
    パブリックsetData(itemDataList: 配列<任意>) {
        this.itemDataList = itemDataList.slice();
        コンテンツを更新します。
    }
 
    /**リストのパラメータを計算する*/
    プライベートcountListParam() {
        dataLen = this.itemDataList.length; とします。
        if (this.type == ListType.Vertical) {
            this.scrollView.horizo​​ntal = false;
            this.scrollView.vertical = true;
            this.content.width = this.content.parent.width;
            this.content.height = dataLen * this.itemHeight + (dataLen - 1) * this.spaceY + this.padding_top + this.padding_buttom;
            this.spawnCount = Math.round(this.scrollView.node.height / (this.itemHeight + this.spaceY)) + 2; // 作成される項目インスタンスの数を計算します。これは、現在の scrollView コンテナーに配置できる項目の数より 2 多い数です。 this.halfScrollView = this.scrollView.node.height / 2 + this.itemHeight / 2 + this.spaceY; // 項目の表示範囲である bufferZone を計算します。 this.updateFun = this.updateV;
        } そうでない場合 (this.type == ListType.Horizo​​ntal) {
            this.scrollView.horizo​​ntal = true;
            this.scrollView.vertical = false;
            this.content.width = dataLen * this.itemWidth + (dataLen - 1) * this.spaceX + this.padding_left + this.padding_right;
            this.content.height = this.content.parent.height;
            this.spawnCount = Math.round(this.scrollView.node.width / (this.itemWidth + this.spaceX)) + 2;
            this.halfScrollView = this.scrollView.node.width / 2 + this.itemWidth / 2 + this.spaceX;
            this.updateFun = this.udpateH;
        } そうでない場合 (this.type == ListType.Grid) {
            if (this.startAxis == StartAxisType.Vertical) {
                this.scrollView.horizo​​ntal = false;
                this.scrollView.vertical = true;
                this.content.width = this.content.parent.width;
                //左と右の距離が大きすぎてアイテムが収まらない場合は、左と右の両方が 0 に設定され、効果がないのと同じです。if (this.padding_left + this.padding_right + this.itemWidth + this.spaceX > this.content.width) {
                    this.padding_left = 0;
                    this.padding_right = 0;
                    console.error("padding_left または padding_right が大きすぎます");
                }
 
                this.gridCol = Math.floor((this.content.width - this.padding_left - this.padding_right) / (this.itemWidth + this.spaceX));
                this.gridRow = Math.ceil(dataLen / this.gridCol);
                this.content.height = this.gridRow * this.itemHeight + (this.gridRow - 1) * this.spaceY + this.padding_top + this.padding_buttom;
                this.spawnCount = Math.round(this.scrollView.node.height / (this.itemHeight + this.spaceY)) * this.gridCol + this.gridCol * 2;
                this.halfScrollView = this.scrollView.node.height / 2 + this.itemHeight / 2 + this.spaceY;
                this.updateFun = this.updateGrid_V;
            } そうでない場合 (this.startAxis == StartAxisType.Horizo​​ntal) {
                this.scrollView.horizo​​ntal = true;
                this.scrollView.vertical = false;
                //高さの間隔を計算します this.content.height = this.content.parent.height;
                // 左と右の距離が大きすぎてアイテムが収まらない場合は、左と右の両方が 0 に設定され、効果がないのと同じです。if (this.padding_top + this.padding_buttom + this.itemHeight + this.spaceY > this.content.height) {
                    this.padding_top = 0;
                    this.padding_buttom = 0;
                    console.error("padding_top または padding_buttom が大きすぎます");
                }
 
                this.gridRow = Math.floor((this.content.height - this.padding_top - this.padding_buttom) / (this.itemHeight + this.spaceY));
                this.gridCol = Math.ceil(dataLen / this.gridRow);
                this.content.width = this.gridCol * this.itemWidth + (this.gridCol - 1) * this.spaceX + this.padding_left + this.padding_right;
                this.spawnCount = Math.round(this.scrollView.node.width / (this.itemWidth + this.spaceX)) * this.gridRow + this.gridRow * 2;
                this.halfScrollView = this.scrollView.node.width / 2 + this.itemWidth / 2 + this.spaceX;
                this.updateFun = this.updateGrid_H;
            }
        }
    }
 
    /**
     * リストを作成します * @param startIndex 表示されるデータの開始インデックス 0 は最初の項目を表します * @param offset ScrollView オフセット */
    プライベートcreateList(開始インデックス: 数値、オフセット: cc.Vec2) {
        // 表示するデータの長さが仮想リストの長さより大きい場合、最後の数個のデータを削除するときに、リストをスクロールビューの一番下にリセットする必要があります。if (this.itemDataList.length > this.spawnCount && (startIndex + this.spawnCount - 1) >= this.itemDataList.length) {
            startIndex = this.itemDataList.length - this.spawnCount;
            オフセット = this.scrollView.getMaxScrollOffset();
 
            // 表示するデータの長さが仮想リストの長さ以下の場合は、余分な仮想リスト項目を非表示にします} else if (this.itemDataList.length <= this.spawnCount) {
            開始インデックス = 0;
        }
 
        (i = 0 とします; i < this.spawnCount; i++) {
            項目を cc.Node にします。
            // 表示するデータインデックスがデータ範囲内であれば、アイテムインスタンスが表示されます if (i + startIndex < this.itemDataList.length) {
                if (this.itemList[i] == null) {
                    アイテム = this.getItem();
                    this.itemList.push(アイテム);
                    アイテムの親 = this.content;
                } それ以外 {
                    アイテム = this.itemList[i];
                }
                // 表示するデータインデックスがデータ範囲を超える場合、アイテムインスタンスは非表示になります} else {
                //アイテムインスタンスの数 > 表示されるデータの量 if (this.itemList.length > (this.itemDataList.length - startIndex)) {
                    アイテム = this.itemList.pop();
                    アイテムを親から削除します。
                    this.itemPool.push(アイテム);
                }
                続く;
            }
 
            itemRender を作成します: ItemRender = item.getComponent(ItemRender);
            itemRender.itemIndex = i + 開始インデックス;
            itemRender.data = this.itemDataList[i + 開始インデックス];
            アイテムレンダリングデータが変更されました。
 
            if (this.type == ListType.Vertical) {
                //コンテンツのアンカーポイント X は 0 なので、item の x 値は content.with/2 となり、中央揃えを意味します。アンカーポイント Y は 1 なので、item の y 値はコンテンツの上部から下に向かって 0 から負の無限大になります。したがって、item.y = -item.height/2 の場合、コンテンツの上部になります。
                item.setPosition(this.content.width / 2, -item.height * (0.5 + i + startIndex) - this.spaceY * (i + startIndex) - this.padding_top);
            } そうでない場合 (this.type == ListType.Horizo​​ntal) {
                item.setPosition(item.width * (0.5 + i + startIndex) + this.spaceX * (i + startIndex) + this.padding_left, -this.content.height / 2);
            } そうでない場合 (this.type == ListType.Grid) {
                this.startAxis == StartAxisType.Verticalの場合{
                    var row = Math.floor((i + startIndex) / this.gridCol);
                    var col = (i + startIndex) % this.gridCol;
                    item.setPosition(item.width * (0.5 + col) + this.spaceX * col + this.padding_left, -item.height * (0.5 + row) - this.spaceY * row - this.padding_top);
                    アイテムの不透明度 = 255;
                } そうでない場合 (this.startAxis == StartAxisType.Horizo​​ntal) {
                    var row = (i + startIndex) % this.gridRow;
                    var col = Math.floor((i + startIndex) / this.gridRow);
                    item.setPosition(item.width * (0.5 + col) + this.spaceX * col + this.padding_left, -item.height * (0.5 + row) - this.spaceY * row - this.padding_top);
                    アイテムの不透明度 = 255;
                }
            }
        }
 
        this.scrollView.scrollToOffset(オフセット);
    }
 
    /**リスト項目を取得する*/
    プライベートgetItem() {
        if (this.itemPool.length == 0) {
            cc.instantiate(this.itemRender) を返します。
        } それ以外 {
            this.itemPool.pop() を返します。
        }
    }
 
    更新(dt) {
        if (this.bScrolling == false) {
            戻る;
        }
        this.updateTimer += dt;
        this.updateTimer が this.updateInterval より小さい場合、
            戻る;
        }
        this.updateTimer = 0;
        this.bScrolling = false;
        this.updateFun();
    }
 
    スクロール時() {
        this.bスクロール = true;
    }
 
    /**垂直配置*/
    プライベートupdateV() {
        items = this.itemList とします。
        アイテムを作成します。
        bufferZone を this.halfScrollView とします。
        isUp を this.scrollView.content.y > this.lastContentPosY とします。
        offset = (this.itemHeight + this.spaceY) * items.length; とします。
        (i = 0 とします; i < items.length; i++) {
            アイテム = items[i];
            viewPos = this.getPositionInView(item); とします。
            (isUp)の場合{
                //アイテムが上にスライドすると、scrollView の上限を超え、アイテムは再利用のために下に移動されます。アイテムが下に移動する位置は、コンテンツの下限を超えてはなりません。if (viewPos.y > bufferZone && item.y - offset - this.padding_buttom > -this.content.height) {
                    itemRender を作成します: ItemRender = item.getComponent(ItemRender);
                    itemIndex = itemRender.itemIndex + items.length; とします。
                    インデックスを要素に含めます。
                    itemRender.data = this.itemDataList[itemIndex];
                    アイテムレンダリングデータが変更されました。
                    item.y = item.y - オフセット;
                }
            } それ以外 {
                //アイテムが下にスライドすると、scrollView の下の境界を超え、再利用のためにアイテムを上に移動します。アイテムが上に移動する位置は、コンテンツの上境界を超えてはなりません if (viewPos.y < -bufferZone && item.y + offset + this.padding_top < 0) {
                    itemRender を作成します: ItemRender = item.getComponent(ItemRender);
                    itemIndex = itemRender.itemIndex - items.length; とします。
                    インデックスを要素に含めます。
                    itemRender.data = this.itemDataList[itemIndex];
                    アイテムレンダリングデータが変更されました。
                    アイテム.y = アイテム.y + オフセット;
                }
            }
        }
        this.lastContentPosY = this.scrollView.content.y;
    }
 
    /**水平配置*/
    プライベート udpateH() {
        items = this.itemList とします。
        アイテムを作成します。
        bufferZone を this.halfScrollView とします。
        isRight を this.scrollView.content.x > this.lastContentPosX とします。
        offset = (this.itemWidth + this.spaceX) * items.length; とします。
        (i = 0 とします; i < items.length; i++) {
            アイテム = items[i];
            viewPos = this.getPositionInView(item); とします。
            if (isRight) {
                //アイテムが右にスライドすると、scrollView の右境界を超え、再利用のためにアイテムが左に移動します。左に移動されたアイテムの位置は、コンテンツの左境界を超えてはなりません。if (viewPos.x > bufferZone && item.x - offset - this.padding_left > 0) {
                    itemRender を作成します: ItemRender = item.getComponent(ItemRender);
                    itemIndex = itemRender.itemIndex - items.length; とします。
                    インデックスを要素に含めます。
                    itemRender.data = this.itemDataList[itemIndex];
                    アイテムレンダリングデータが変更されました。
                    item.x = item.x - オフセット;
                }
            } それ以外 {
                //アイテムが左にスライドすると、scrollView の左境界を超え、再利用のためにアイテムは右に移動されます。右に移動されたアイテムの位置は、コンテンツの右境界を超えてはなりません。if (viewPos.x < -bufferZone && item.x + offset + this.padding_right < this.content.width) {
                    itemRender を作成します: ItemRender = item.getComponent(ItemRender);
                    itemIndex = itemRender.itemIndex + items.length; とします。
                    インデックスを要素に含めます。
                    itemRender.data = this.itemDataList[itemIndex];
                    アイテムレンダリングデータが変更されました。
                    アイテム.x = アイテム.x + オフセット;
                }
            }
        }
        this.lastContentPosX = this.scrollView.content.x;
    }
 
    /**グリッドの垂直配置*/
    プライベートupdateGrid_V() {
        items = this.itemList とします。
        項目を cc.Node にします。
        bufferZone を this.halfScrollView とします。
        isUp を this.scrollView.content.y > this.lastContentPosY とします。
        offset = (this.itemHeight + this.spaceY) * (this.spawnCount / this.gridCol) とします。
        (i = 0 とします; i < items.length; i++) {
            アイテム = items[i];
            viewPos = this.getPositionInView(item); とします。
            (isUp)の場合{
                //アイテムが上にスライドすると、scrollView の上限を超え、アイテムは再利用のために下に移動されます。アイテムが下に移動する位置は、コンテンツの下限を超えてはなりません。if (viewPos.y > bufferZone && item.y - offset - this.padding_buttom > -this.content.height) {
                    itemRender を作成します: ItemRender = item.getComponent(ItemRender);
                    itemIndex = itemRender.itemIndex + (this.spawnCount / this.gridCol) * this.gridCol とします。
                    if (this.itemDataList[itemIndex] != null) {
                        item.y = item.y - オフセット;
                        インデックスを要素に含めます。
                        itemRender.data = this.itemDataList[itemIndex];
                        アイテムレンダリングデータが変更されました。
                        アイテムの不透明度 = 255;
                    } それ以外 {
                        item.y = item.y - オフセット;
                        インデックスを要素に含めます。
                        アイテムの不透明度 = 0;
                    }
                }
            } else{// アイテムが下にスライドすると、scrollView の下の境界を超え、再利用のためにアイテムを上に移動します。アイテムが上に移動する位置は、コンテンツの上境界を超えてはなりません if (viewPos.y < -bufferZone && item.y + offset + this.padding_top < 0) {
                    itemRender を作成します: ItemRender = item.getComponent(ItemRender);
                    itemIndex = itemRender.itemIndex - (this.spawnCount / this.gridCol) * this.gridCol とします。
                    if (this.itemDataList[itemIndex] != null) {
                        アイテム.y = アイテム.y + オフセット;
                        インデックスを要素に含めます。
                        itemRender.data = this.itemDataList[itemIndex];
                        アイテムレンダリングデータが変更されました。
                        アイテムの不透明度 = 255;
                    } それ以外 {
                        アイテム.y = アイテム.y + オフセット;
                        インデックスを要素に含めます。
                        アイテムの不透明度 = 0;
                    }
                }
            }
        }
        this.lastContentPosY = this.scrollView.content.y;
    }
 
    /**グリッドの水平配置*/
    プライベートupdateGrid_H() {
        items = this.itemList とします。
        アイテムを作成します。
        bufferZone を this.halfScrollView とします。
        isRight を this.scrollView.content.x > this.lastContentPosX とします。
        offset = (this.itemWidth + this.spaceX) * (this.spawnCount / this.gridRow) とします。
        (i = 0 とします; i < items.length; i++) {
            アイテム = items[i];
            viewPos = this.getPositionInView(item); とします。
            if (isRight) {
                //アイテムが右にスライドすると、scrollView の右境界を超え、再利用のためにアイテムが左に移動します。左に移動されたアイテムの位置は、コンテンツの左境界を超えてはなりません。if (viewPos.x > bufferZone && item.x - offset - this.padding_left > 0) {
                    itemRender を作成します: ItemRender = item.getComponent(ItemRender);
                    itemIndex = itemRender.itemIndex - (this.spawnCount / this.gridRow) * this.gridRow とします。
                    if (this.itemDataList[itemIndex] != null) {
                        item.x = item.x - オフセット;
                        インデックスを要素に含めます。
                        itemRender.data = this.itemDataList[itemIndex];
                        アイテムレンダリングデータが変更されました。
                        アイテムの不透明度 = 255;
                    } それ以外 {
                        item.x = item.x - オフセット;
                        インデックスを要素に含めます。
                        アイテムの不透明度 = 0;
                    }
                }
            } それ以外 {
                //アイテムが左にスライドすると、scrollView の左境界を超え、再利用のためにアイテムは右に移動されます。右に移動されたアイテムの位置は、コンテンツの右境界を超えてはなりません。if (viewPos.x < -bufferZone && item.x + offset + this.padding_right < this.content.width) {
                    itemRender を作成します: ItemRender = item.getComponent(ItemRender);
                    itemIndex = itemRender.itemIndex + (this.spawnCount / this.gridRow) * this.gridRow; とします。
                    if (this.itemDataList[itemIndex] != null) {
                        アイテム.x = アイテム.x + オフセット;
                        インデックスを要素に含めます。
                        itemRender.data = this.itemDataList[itemIndex];
                        アイテムレンダリングデータが変更されました。
                        アイテムの不透明度 = 255;
                    } それ以外 {
                        アイテム.x = アイテム.x + オフセット;
                        インデックスを要素に含めます。
                        アイテムの不透明度 = 0;
                    }
                }
            }
        }
        this.lastContentPosX = this.scrollView.content.x;
    }
 
    /**スクロールビュー内のアイテムのローカル座標を取得します*/
    プライベート getPositionInView(item) {
        worldPos = item.parent.convertToWorldSpaceAR(item.position); とします。
        viewPos = this.scrollView.node.convertToNodeSpaceAR(worldPos); とします。
        viewPos を返します。
    }
 
    /**リストデータを取得する*/
    パブリック getListData() {
        this.itemDataList を返します。
    }
 
    /**
     * リストの最後にデータ項目を追加します * @param data data */
    パブリックaddItem(データ: 任意) {
        this.itemDataList.push(データ);
        コンテンツを更新します。
    }
 
    /**
     * リストの指定された位置にデータ項目を追加します * @param index position、0 は最初の項目を意味します * @param data data */
    パブリックaddItemAt(インデックス: 数値、データ: 任意) {
        if (this.itemDataList[index] != null || this.itemDataList.length == index) {
            this.itemDataList.splice(インデックス、1、データ);
            コンテンツを更新します。
        }
    }
 
    /**
     * データ項目を削除します* @param index 削除する項目の位置、0 は最初の項目を意味します*/
    パブリックdeleteItem(インデックス: 数値) {
        if (this.itemDataList[index] != null) {
            this.itemDataList.splice(インデックス、1);
            コンテンツを更新します。
        }
    }
 
    /**
     * データ項目を変更する * @param インデックス位置、0 は最初の項目を意味する * @param データ 置換するデータ */
    パブリック changeItem(インデックス: 数値、データ: 任意) {
        if (this.itemDataList[index] != null) {
            this.itemDataList[インデックス] = データ;
            コンテンツを更新します。
        }
    }
 
    /**最初のアイテムの位置を取得します*/
    プライベートupdateContent() {
        //表示リストインスタンスは0です if (this.itemList.length == 0) {
            this.countListParam();
            this.createList(0, 新しいcc.Vec2(0, 0));
            //表示リスト内のインスタンス数が0でない場合は、アイテムインスタンス配列を並べ替える必要があります} else {
            if (this.type == ListType.Vertical) {
                this.itemList.sort((a: 任意、b: 任意) => {
                    返却は - ay まで。
                });
            } そうでない場合 (this.type == ListType.Horizo​​ntal) {
                this.itemList.sort((a: 任意、b: 任意) => {
                    ax - bx を返します。
                });
            } そうでない場合 (this.type == ListType.Grid) {
                this.startAxis == StartAxisType.Verticalの場合{
                    this.itemList.sort((a: 任意、b: 任意) => {
                        ax - bx を返します。
                    });
                    this.itemList.sort((a: 任意、b: 任意) => {
                        返却は - ay まで。
                    });
                } そうでない場合 (this.startAxis == StartAxisType.Horizo​​ntal) {
                    this.itemList.sort((a: 任意、b: 任意) => {
                        返却は - ay まで。
                    });
                    this.itemList.sort((a: 任意、b: 任意) => {
                        ax - bx を返します。
                    });
                }
            }
 
            this.countListParam();
 
            //最初のアイテムインスタンスに表示する必要があるデータインデックスを取得します。var startIndex = this.itemList[0].getComponent(ItemRender).itemIndex;
 
            this.type == ListType.Grid && this.startAxis == StartAxisType.Vertical の場合 {
                startIndex += (startIndex + this.spawnCount) % this.gridCol;
            } そうでない場合 (this.type == ListType.Grid && this.startAxis == StartAxisType.Horizo​​ntal) {
                startIndex += (startIndex + this.spawnCount) % this.gridRow;
            }
 
            //getScrollOffset() と scrollToOffset() の x 値は逆です var offset: cc.Vec2 = this.scrollView.getScrollOffset();
            オフセットx = - オフセットx;
 
            this.createList(開始インデックス、オフセット);
        }
    }
 
    /**破壊する*/
    パブリックonDestroy() {
        //リスト項目をクリーンアップします。let len ​​= this.itemList.length;
        (i = 0; i < len; i++) の場合 {
            cc.isValid(this.itemList[i], true) の場合 {
                this.itemList[i].destroy();
            }
        }
        this.itemList.length = 0;
        //オブジェクト プールをクリーンアップします len = this.itemPool.length;
        (i = 0; i < len; i++) の場合 {
            cc.isValid(this.itemPool[i], true) の場合 {
                this.itemPool[i].destroy();
            }
        }
        this.itemPool.length = 0;
        // リスト データをクリーンアップします this.itemDataList.length = 0;
    }
}

上記は、CocosCreator でリストを作成する方法の詳細です。CocosCreator リストの詳細については、123WORDPRESS.COM の他の関連記事をご覧ください。

以下もご興味があるかもしれません:
  • Unity3Dはカメラレンズの動きを実現し、角度を制限する
  • CocosCreatorで複数のタイマーを使用する方法の詳細な説明
  • CocosCreator 学習モジュールスクリプト
  • CocosCreator で物理エンジン ジョイントを使用する方法
  • CocosCreatorでJSZip圧縮を使用する方法
  • CocosCreator 入門チュートリアル: TS で初めてのゲームを作る
  • CocosCreator ソースコードの解釈: エンジンの起動とメインループ
  • CocosCreator 一般的なフレームワーク設計リソース管理
  • CocosCreator で http と WebSocket を使用する方法
  • CocosCreator の新しいリソース管理システムの分析
  • CocosCreator でカメラトラッキングに cc.follow を使用する方法

<<:  Macでのファイル権限の表示と設定の詳細な説明

>>:  MySQL 変数宣言とストアド プロシージャの分析

推薦する

Iframe の使用を減らすべきいくつかの理由の分析

次のグラフは、100 個の異なる要素で iframe を作成するのにどれくらいの時間がかかるかを示し...

JavaScript Domはカルーセルの原理と例を実装します

カルーセルを作りたい場合、まずその原理を理解する必要があります。画像を右から左にスライドさせるにはど...

マスタークラスタに再参加する k8s ノードの実装

1. ノードを削除するkubectl delete node node01を実行します。 2. この...

VueでJSXを使用する方法

JSXとは何かJSX は Javascript の構文拡張であり、JSX = Javascript ...

Vue2.0+ElementUI+PageHelperで実装されたテーブルページング機能

序文最近、いくつかのフロントエンド プロジェクトに取り組んでおり、ページにいくつかのテーブルを表示す...

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装追加されたレコード: テーブル名...

MySQL の計画タスクとイベント スケジュール例の分析

この記事では、例を使用して、MySQL の計画されたタスクとイベントのスケジュールについて説明します...

よく使われるCSSカプセル化方法の概要

1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1...

Mac に mysql5.7 をインストールするための完全な手順 (画像とテキスト付き)

最近、Mac システムを使用して、ローカル Web サーバー環境を構築する準備をしていました。 Ma...

MySQLでルートユーザーのパスワードを変更する方法

方法1: SET PASSWORDコマンドを使用する mysql> username@loca...

VUE ユニアプリの条件付きコーディングとページレイアウトに関する簡単な説明

目次条件付きコンパイルページレイアウト要約する条件付きコンパイル条件付きコンパイルでは、特別なコメン...

Mapper SQL ステートメント フィールドとエンティティ クラス属性名の関係は何ですか?

背景: 1. データベースに通知テーブルがある あなたは見ることができますgmt_create、通知...

Alibaba Cloud イメージリポジトリを使用して外部 Docker イメージを構築する方法の詳細な説明

Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...