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.Horizontal; /**リスト項目間のX間隔*/ @property({ type: cc.Integer, tooltip: "リスト項目 X 間隔", visible() { return (this.type == ListType.Horizontal || 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.Horizontal || this.type == ListType.Grid) } }) パブリック padding_left: 数値 = 0; @property(cc.Integer) パブリック_padding: 数値 = 0; /**右スペース*/ @property({ type: cc.Integer, tooltip: "右間隔", visible() { return (this.type == ListType.Horizontal || 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.horizontal = 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.Horizontal) { this.scrollView.horizontal = 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.horizontal = 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.Horizontal) { this.scrollView.horizontal = 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.Horizontal) { 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.Horizontal) { 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.Horizontal) { 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.Horizontal) { 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.Horizontal) { 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 の他の関連記事をご覧ください。 以下もご興味があるかもしれません:
|
HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。 HTML フォー...
1例: 図1のフィールドを図2に分割するには アカウントIDを選択、 サブストリングインデックス(サ...
目次1. クロスドメインフィルタ CorsFilter 1.1 設定例1.2 パラメータの説明2. ...
MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...
1. 準備Linux オペレーティング システムをインストールした後、ここで Linux 7 を選択...
この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...
nginx の HTTP モジュールを作成する場合、リクエスト開始時のアクセス許可の有無、コンテンツ...
MySQL 5.7.19 winx64 解凍版のインストールチュートリアルを収録しています。具体的な...
多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...
目次1. 基本を理解する2. システム環境を確認する3. ftpコマンドをインストールする[オプショ...
一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われています。これは HTML 言...
目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...
ある日、リーダーはメイン ページに iframe を埋め込み、親ページと子ページ間で双方向にメッセー...
序文Linux カーネルでは、netfilter は、パケット フィルタリング、ネットワーク アドレ...
背景グループでは、CSS を使用してインセット コーナー ボタンを実装する方法や、矢印付きのボタンを...