CocosCreator-Version: 2.3.4 Cocos hat keine Listenkomponente, Sie müssen sie also selbst schreiben. Suchen Sie die Demo von asset/case/02_ui/05_listView aus dem Cocos-Beispielprojekt und ändern Sie sie. Schreiben Sie eine virtuelle Liste mit vertikalem Layout, horizontalem Layout, Rasterlayout und Padding-Liste Demo-Adresse: https://files-cdn.cnblogs.com/files/gamedaybyday/cocos2.3.4_ListViewDemo_Grid.7z Das ursprüngliche LayOut von Cocos erstellt eine Liste und es gibt 100 Instanzen für 100 Daten (linkes Bild). In einer virtuellen Liste sind nur die Instanzen vorhanden, die Sie sehen, und diese werden beim Scrollen erneut angezeigt. (Bild rechts) So verwenden Sie die ListeDie Verwendungsmethode besteht darin, der ScrollView die Listenkomponente hinzuzufügen. Die Listenelemente der Liste werden direkt unter dem Inhalt platziert und der Listenkomponente zugewiesen. Für die Datenaktualisierung muss das Element ein von ItemRender geerbtes Objekt hinzufügen. Legen Sie die Daten für die Liste im Code fest //Ranking-Daten festlegen let rankData = []; für (lass i = 0; i < 100; i++) { rankData.push({rank:i, name:"name"}); } dies.rankList.setData(rankData); Quellcode // TypeScript lernen: // - https://docs.cocos.com/creator/manual/en/scripting/typescript.html // Attribut lernen: // - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html // Erfahren Sie mehr über Lebenszyklus-Rückrufe: // - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html importiere ItemRender aus "./ItemRender" const { ccclass, Eigenschaft } = cc._decorator; /**Methode zur Listenanordnung*/ export enum ListType { /**Horizontale Anordnung*/ Horizontal = 1, /**Vertikale Anordnung*/ Vertikal = 2, /**Gitteranordnung*/ Raster = 3 } /**Richtung im Rasterlayout*/ export enum StartAxisType { /**Horizontale Anordnung*/ Horizontal = 1, /**Vertikale Anordnung*/ Vertikal = 2, } /** * Liste * Geändert basierend auf ListView von cocos_example * @author chenkai 2020.7.8 * @Beispiel * 1. Erstellen Sie eine Cocos ScrollView-Komponente, fügen Sie eine Liste hinzu und legen Sie die Listeneigenschaften fest* */ @ccklasse exportiere Standardklasse List erweitert cc.Component { //====================== Eigenschaftenfenster========================= /**Listenoptionen*/ @property({ Typ: cc.Node, Tooltip: "Listenelement" }) öffentliches itemRender: cc.Node = null; /**Anordnungsmethode*/ @property({ Typ: cc.Enum(ListType), Tooltip: "Anordnungsmethode" }) öffentlicher Typ: ListType = ListType.Vertical; /**Richtung im Rasterlayout*/ @property({ type: cc.Enum(StartAxisType), tooltip: "Richtung im Rasterlayout", sichtbar() { return this.type == ListType.Grid } }) öffentliche Startachse: StartAxisType = StartAxisType.Horizontal; /**X Abstand zwischen Listenelementen*/ @property({ Typ: cc.Integer, Tooltip: "Listenelement X-Intervall", sichtbar() { return (this.type == ListType.Horizontal || this.type == ListType.Grid) } }) öffentlicher RaumX: Zahl = 0; /**Y-Abstand zwischen Listenelementen*/ @property({ Typ: cc.Integer, Tooltip: "Listenelement Y-Intervall", sichtbar() { return this.type == ListType.Vertical || this.type == ListType.Grid } }) öffentlicher RaumY: Zahl = 0; /**Oberer Abstand*/ @property({ Typ: cc.Integer, Tooltip: "Oberer Abstand", sichtbar() { return (this.type == ListType.Vertical || this.type == ListType.Grid) } }) öffentliches padding_top: Zahl = 0; /**Unterer Abstand*/ @property({ Typ: cc.Integer, Tooltip: "Unterer Abstand", sichtbar() { return (this.type == ListType.Vertical || this.type == ListType.Grid) } }) öffentliches padding_buttom: Zahl = 0; /**Linker Abstand*/ @property({ Typ: cc.Integer, Tooltip: "Linker Abstand", sichtbar() { return (this.type == ListType.Horizontal || this.type == ListType.Grid) } }) öffentliches padding_left: Zahl = 0; @Eigenschaft(cc.Integer) öffentliche _Padding: Zahl = 0; /**Richtiger Abstand*/ @property({ Typ: cc.Integer, Tooltip: "Rechter Abstand", sichtbar() { return (this.type == ListType.Horizontal || this.type == ListType.Grid) } }) öffentliches Padding_Right: Zahl = 0; //======================= Scrollender Container=============================== /**Listen-Scroll-Container*/ öffentliche ScrollView: cc.ScrollView = null; /**ScrollView-Inhaltscontainer*/ privater Inhalt: cc.Node = null; //======================== Listenelemente=========================== /**Elementdaten auflisten*/ private itemDataList: Array<beliebig> = []; /**Anzahl der Instanzen, die erstellt werden sollen*/ privater SpawnCount: Zahl = 0; /**Array zum Speichern von Listenelementinstanzen*/ private Elementliste: Array<cc.Node> = []; /**Artikelhöhe*/ private Artikelhöhe: Zahl = 0; /**Artikelbreite*/ private Artikelbreite: Zahl = 0; /**Listenelemente speichern, die nicht mehr verwendet werden*/ privater ItemPool: Array<cc.Node> = []; //======================= Berechnungsparameter========================= /**Der Abstand vom Mittelpunkt der ScrollView. Elemente, die diesen Abstand überschreiten, werden zurückgesetzt. Normalerweise wird es auf scrollVIew.height/2 + item.heigt/2 + space eingestellt, da dieses Abstandselement knapp außerhalb des Anzeigebereichs der ScrollView liegt*/ private halfScrollView:Nummer = 0; /**Der X-Wert des vorherigen Inhalts wird mit dem X-Wert des aktuellen Inhalts verglichen, um zu bestimmen, ob nach links oder rechts gescrollt werden soll*/ privater letzterInhaltPosX: Zahl = 0; /**Der Y-Wert des vorherigen Inhalts wird mit dem Y-Wert des aktuellen Inhalts verglichen, um zu bestimmen, ob nach oben oder unten gescrollt werden soll*/ privater letzterInhaltPosY: Zahl = 0; /**Anzahl der Rasterzeilen*/ private Rasterzeile: Zahl = 0; /**Anzahl der Rasterspalten*/ privates GridCol: Zahl = 0; /**Aktualisierungszeit, Einheit s */ privater UpdateTimer: Zahl = 0; /**Aktualisierungsintervall, Einheit s */ privates Update-Intervall: Zahl = 0,1; /**Ob der Container gescrollt werden soll*/ privates bScrolling: boolean = false; /**Aktualisierungsfunktion*/ privates UpdateFun: Funktion = Funktion () { }; beim Laden() { diese.itemHeight = diese.itemRender.height; diese.itemWidth = diese.itemRender.width; dies.scrollView = dies.node.getComponent(cc.ScrollView); dieser.Inhalt = dieser.ScrollView.Inhalt; dieser.Inhalt.AnkerX = 0; dieser.Inhalt.AnkerY = 1; dieser.Inhalt.AlleKinderentfernen(); this.scrollView.node.on("Scrollen", this.onScrolling, dies); } /** * Listendaten (Listendaten werden kopiert und verwendet. Wenn sich die Listendaten ändern, müssen Sie die Daten zurücksetzen) * @param itemDataList Artikeldatenliste */ öffentliche setData(itemDataList: Array<beliebig>) { this.itemDataList = itemDataList.slice(); dies.updateContent(); } /**Berechnen Sie die Parameter der Liste*/ private countListParam() { Lassen Sie dataLen = this.itemDataList.length; wenn (dieser.Typ == ListType.Vertical) { this.scrollView.horizontal = falsch; this.scrollView.vertikal = wahr; diese.Inhaltsbreite = diese.Inhaltsübergeordnete.Breite; diese.Inhaltshöhe = Datenlänge * diese.Elementhöhe + (Datenlänge - 1) * diese.RaumY + diese.Padding_top + diese.Padding_buttom; this.spawnCount = Math.round(this.scrollView.node.height / (this.itemHeight + this.spaceY)) + 2; //Berechnen Sie die Anzahl der erstellten Elementinstanzen, die 2 mehr ist als die Anzahl der Elemente, die im aktuellen ScrollView-Container platziert werden können this.halfScrollView = this.scrollView.node.height / 2 + this.itemHeight / 2 + this.spaceY; //Berechnen Sie die Pufferzone, den Anzeigebereich des Elements this.updateFun = this.updateV; } sonst wenn (dieser.Typ == ListType.Horizontal) { this.scrollView.horizontal = wahr; this.scrollView.vertical = falsch; diese.Inhaltsbreite = Datenlänge * diese.Elementbreite + (Datenlänge - 1) * diese.SpaceX + diese.Padding_left + diese.Padding_right; diese.Inhaltshöhe = diese.Inhaltsübergeordnete.Höhe; 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; dies.updateFun = dies.udpateH; } sonst wenn (dieser.Typ == ListType.Grid) { wenn (this.startAxis == StartAxisType.Vertical) { this.scrollView.horizontal = falsch; this.scrollView.vertikal = wahr; diese.Inhaltsbreite = diese.Inhaltsübergeordnete.Breite; //Wenn der Abstand zwischen links und rechts zu groß ist, um ein Element unterzubringen, werden sowohl links als auch rechts auf 0 gesetzt. Dies ist gleichbedeutend damit, dass es nicht wirksam wird, wenn (this.padding_left + this.padding_right + this.itemWidth + this.spaceX > this.content.width) { dies.padding_left = 0; dies.padding_right = 0; console.error("padding_left oder padding_right ist zu groß"); } this.gridCol = Math.floor((this.content.width - this.padding_left - this.padding_right) / (this.itemWidth + this.spaceX)); this.gridRow = Math.ceil(dataLen / this.gridCol); diese.Inhaltshöhe = diese.Rasterzeile * diese.Elementhöhe + (diese.Rasterzeile - 1) * dieses.RaumY + dieses.Padding_top + dieses.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; dies.updateFun = dies.updateGrid_V; } sonst wenn (this.startAxis == StartAxisType.Horizontal) { this.scrollView.horizontal = wahr; this.scrollView.vertical = falsch; //Höhenintervall berechnen this.content.height = this.content.parent.height; //Wenn der Abstand zwischen links und rechts zu groß ist, um ein Element unterzubringen, werden sowohl links als auch rechts auf 0 gesetzt. Dies ist gleichbedeutend damit, dass es nicht wirksam wird, wenn (this.padding_top + this.padding_buttom + this.itemHeight + this.spaceY > this.content.height) { dies.padding_top = 0; dies.padding_buttom = 0; console.error("padding_top oder padding_buttom ist zu groß"); } this.gridRow = Math.floor((this.content.height - this.padding_top - this.padding_buttom) / (this.itemHeight + this.spaceY)); this.gridCol = Math.ceil(dataLen / this.gridRow); diese.Inhaltsbreite = diese.Rasterspalte * diese.Elementbreite + (diese.Rasterspalte - 1) * dieses.RaumX + dieses.Padding_left + dieses.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; dies.updateFun = dies.updateGrid_H; } } } /** * Erstellen Sie eine Liste * @param startIndex Der Startindex der angezeigten Daten 0 stellt das erste Element dar * @param offset ScrollView-Offset */ private createList(startIndex: Zahl, Offset: cc.Vec2) { //Wenn die Länge der anzuzeigenden Daten > der Länge der virtuellen Liste ist, muss beim Löschen der letzten Daten die Liste an das Ende der ScrollView zurückgesetzt werden, if (this.itemDataList.length > this.spawnCount && (startIndex + this.spawnCount - 1) >= this.itemDataList.length) { startIndex = diese.itemDataList.length - diese.spawnCount; Offset = this.scrollView.getMaxScrollOffset(); //Wenn die Länge der anzuzeigenden Daten <= die Länge der virtuellen Liste ist, verstecke die zusätzlichen virtuellen Listenelemente} else if (this.itemDataList.length <= this.spawnCount) { StartIndex = 0; } für (lass i = 0; i < this.spawnCount; i++) { let-Element: cc.Node; //Wenn der anzuzeigende Datenindex innerhalb des Datenbereichs liegt, wird die Elementinstanz angezeigt, wenn (i + startIndex < this.itemDataList.length) { wenn (this.itemList[i] == null) { Artikel = diese.getItem(); dies.itemList.push(Artikel); Element.übergeordnetes Element = dieser.Inhalt; } anders { Artikel = diese.Artikelliste[i]; } //Wenn der anzuzeigende Datenindex den Datenbereich überschreitet, wird die Elementinstanz ausgeblendet} else { //Anzahl der Elementinstanzen > Menge der anzuzeigenden Daten, wenn (this.itemList.length > (this.itemDataList.length - startIndex)) { Artikel = diese.itemList.pop(); Element.removeFromParent(); dies.itemPool.push(Artikel); } weitermachen; } let itemRender: ItemRender = item.getComponent(ItemRender); itemRender.itemIndex = i + startIndex; itemRender.data = diese.itemDataList[i + startIndex]; itemRender.dataChanged(); wenn (dieser.Typ == ListType.Vertical) { //Da der Ankerpunkt X des Inhalts 0 ist, ist der X-Wert des Elements content.with/2, was Zentrierung bedeutet. Der Ankerpunkt Y ist 1, also ist der Y-Wert des Elements von der Oberseite des Inhalts nach unten 0 bis minus unendlich. Wenn also item.y = -item.height/2 ist, steht es oben im Inhalt. item.setPosition(diese.Inhaltsbreite / 2, -item.Höhe * (0,5 + i + Startindex) - dieser.SpaceY * (i + Startindex) - diese.Padding_top); } sonst wenn (dieser.Typ == ListType.Horizontal) { item.setPosition(item.width * (0.5 + i + startIndex) + this.spaceX * (i + startIndex) + this.padding_left, -this.content.height / 2); } sonst wenn (dieser.Typ == ListType.Grid) { wenn (this.startAxis == StartAxisType.Vertical) { var Zeile = 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); Element.Deckkraft = 255; } sonst wenn (this.startAxis == StartAxisType.Horizontal) { var Zeile = (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); Element.Deckkraft = 255; } } } dies.scrollView.scrollToOffset(Versatz); } /**Ein Listenelement abrufen*/ private getItem() { wenn (this.itemPool.length == 0) { gibt cc.instantiate(this.itemRender) zurück; } anders { gib this.itemPool.pop() zurück; } } update(dt) { wenn (this.bScrolling == false) { zurückkehren; } dies.updateTimer += dt; wenn (dieser.updateTimer < dieses.updateInterval) { zurückkehren; } dieser.updateTimer = 0; dies.bScrolling = falsch; dies.updateFun(); } beimScrollen() { dies.bScrolling = true; } /**Vertikale Anordnung*/ private updateV() { Lassen Sie Elemente = diese.Elementliste; Artikel lassen; Lassen Sie die Pufferzone = this.halfScrollView; let isUp = this.scrollView.content.y > this.lastContentPosY; let offset = (diese.itemHeight + dieses.spaceY) * items.length; für (lass i = 0; i < Elemente.Länge; i++) { Artikel = Artikel[i]; let viewPos = this.getPositionInView(item); wenn (ist oben) { //Wenn das Element nach oben gleitet, überschreitet es die obere Grenze von scrollView und das Element wird zur Wiederverwendung nach unten verschoben. Die Position, an der das Element nach unten verschoben wird, darf die untere Grenze des Inhalts nicht überschreiten, wenn (viewPos.y > bufferZone && item.y - offset - this.padding_buttom > -this.content.height) { let itemRender: ItemRender = item.getComponent(ItemRender); let itemIndex = itemRender.itemIndex + items.length; itemRender.itemIndex = Artikelindex; itemRender.data = diese.itemDataList[itemIndex]; itemRender.dataChanged(); Element.y = Element.y – Versatz; } } anders { //Wenn das Element nach unten gleitet, überschreitet es die untere Grenze von scrollView und verschiebt das Element zur Wiederverwendung nach oben. Die Position, an der das Element nach oben verschoben wird, darf die obere Grenze des Inhalts nicht überschreiten, wenn (viewPos.y < -bufferZone && item.y + offset + this.padding_top < 0) { let itemRender: ItemRender = item.getComponent(ItemRender); let itemIndex = itemRender.itemIndex - items.Länge; itemRender.itemIndex = Artikelindex; itemRender.data = diese.itemDataList[itemIndex]; itemRender.dataChanged(); Element.y = Element.y + Offset; } } } dies.lastContentPosY = dies.scrollView.content.y; } /**Horizontale Anordnung*/ private udpateH() { Lassen Sie Elemente = diese.Elementliste; Artikel lassen; Lassen Sie die Pufferzone = this.halfScrollView; let isRight = this.scrollView.content.x > this.lastContentPosX; let offset = (diese.Artikelbreite + dieses.RaumX) * Artikellänge; für (lass i = 0; i < Elemente.Länge; i++) { Artikel = Artikel[i]; let viewPos = this.getPositionInView(item); wenn (istRechts) { //Wenn das Element nach rechts gleitet, überschreitet es die rechte Grenze von scrollView und verschiebt das Element zur Wiederverwendung nach links. Die Position des nach links verschobenen Elements darf die linke Grenze des Inhalts nicht überschreiten, wenn (viewPos.x > bufferZone && item.x - offset - this.padding_left > 0) { let itemRender: ItemRender = item.getComponent(ItemRender); let itemIndex = itemRender.itemIndex - items.Länge; itemRender.itemIndex = Artikelindex; itemRender.data = diese.itemDataList[itemIndex]; itemRender.dataChanged(); Element.x = Element.x – Versatz; } } anders { //Wenn das Element nach links gleitet, überschreitet es die linke Grenze von scrollView und das Element wird zur Wiederverwendung nach rechts verschoben. Die Position des nach rechts verschobenen Elements darf die rechte Inhaltsgrenze nicht überschreiten, wenn (viewPos.x < -bufferZone && item.x + offset + this.padding_right < this.content.width) { let itemRender: ItemRender = item.getComponent(ItemRender); let itemIndex = itemRender.itemIndex + items.length; itemRender.itemIndex = Artikelindex; itemRender.data = diese.itemDataList[itemIndex]; itemRender.dataChanged(); Element.x = Element.x + Offset; } } } dies.lastContentPosX = dies.scrollView.content.x; } /**Vertikale Rasteranordnung*/ private updateGrid_V() { Lassen Sie Elemente = diese.Elementliste; let-Element: cc.Node; Lassen Sie die Pufferzone = this.halfScrollView; let isUp = this.scrollView.content.y > this.lastContentPosY; let offset = (diese.itemHeight + dieses.spaceY) * (diese.spawnCount / dieses.gridCol); für (lass i = 0; i < Elemente.Länge; i++) { Artikel = Artikel[i]; let viewPos = this.getPositionInView(item); wenn (ist oben) { //Wenn das Element nach oben gleitet, überschreitet es die obere Grenze von scrollView und das Element wird zur Wiederverwendung nach unten verschoben. Die Position, an der das Element nach unten verschoben wird, darf die untere Grenze des Inhalts nicht überschreiten, wenn (viewPos.y > bufferZone && item.y - offset - this.padding_buttom > -this.content.height) { let itemRender: ItemRender = item.getComponent(ItemRender); let itemIndex = itemRender.itemIndex + (this.spawnCount / this.gridCol) * this.gridCol; wenn (this.itemDataList[itemIndex] != null) { Element.y = Element.y – Versatz; itemRender.itemIndex = Artikelindex; itemRender.data = diese.itemDataList[itemIndex]; itemRender.dataChanged(); Element.Deckkraft = 255; } anders { Element.y = Element.y – Versatz; itemRender.itemIndex = Artikelindex; Element.Deckkraft = 0; } } } else {//Wenn das Element nach unten gleitet, überschreitet es die untere Grenze von scrollView und verschiebt das Element zur Wiederverwendung nach oben. Die Position, an der das Element nach oben verschoben wird, darf die obere Grenze des Inhalts nicht überschreiten, wenn (viewPos.y < -bufferZone && item.y + offset + this.padding_top < 0) { let itemRender: ItemRender = item.getComponent(ItemRender); let itemIndex = itemRender.itemIndex - (this.spawnCount / this.gridCol) * this.gridCol; wenn (this.itemDataList[itemIndex] != null) { Element.y = Element.y + Offset; itemRender.itemIndex = Artikelindex; itemRender.data = diese.itemDataList[itemIndex]; itemRender.dataChanged(); Element.Deckkraft = 255; } anders { Element.y = Element.y + Offset; itemRender.itemIndex = Artikelindex; Element.Deckkraft = 0; } } } } dies.lastContentPosY = dies.scrollView.content.y; } /**Horizontale Rasteranordnung*/ private updateGrid_H() { Lassen Sie Elemente = diese.Elementliste; Artikel lassen; Lassen Sie die Pufferzone = this.halfScrollView; let isRight = this.scrollView.content.x > this.lastContentPosX; let offset = (diese.itemWidth + dieses.spaceX) * (diese.spawnCount / diese.gridRow); für (lass i = 0; i < Elemente.Länge; i++) { Artikel = Artikel[i]; let viewPos = this.getPositionInView(item); wenn (istRechts) { //Wenn das Element nach rechts gleitet, überschreitet es die rechte Grenze von scrollView und verschiebt das Element zur Wiederverwendung nach links. Die Position des nach links verschobenen Elements darf die linke Grenze des Inhalts nicht überschreiten, wenn (viewPos.x > bufferZone && item.x - offset - this.padding_left > 0) { let itemRender: ItemRender = item.getComponent(ItemRender); let itemIndex = itemRender.itemIndex - (this.spawnCount / this.gridRow) * this.gridRow; wenn (this.itemDataList[itemIndex] != null) { Element.x = Element.x – Versatz; itemRender.itemIndex = Artikelindex; itemRender.data = diese.itemDataList[itemIndex]; itemRender.dataChanged(); Element.Deckkraft = 255; } anders { Element.x = Element.x – Versatz; itemRender.itemIndex = Artikelindex; Element.Deckkraft = 0; } } } anders { //Wenn das Element nach links gleitet, überschreitet es die linke Grenze von scrollView und das Element wird zur Wiederverwendung nach rechts verschoben. Die Position des nach rechts verschobenen Elements darf die rechte Inhaltsgrenze nicht überschreiten, wenn (viewPos.x < -bufferZone && item.x + offset + this.padding_right < this.content.width) { let itemRender: ItemRender = item.getComponent(ItemRender); let itemIndex = itemRender.itemIndex + (this.spawnCount / this.gridRow) * this.gridRow; wenn (this.itemDataList[itemIndex] != null) { Element.x = Element.x + Offset; itemRender.itemIndex = Artikelindex; itemRender.data = diese.itemDataList[itemIndex]; itemRender.dataChanged(); Element.Deckkraft = 255; } anders { Element.x = Element.x + Offset; itemRender.itemIndex = Artikelindex; Element.Deckkraft = 0; } } } } dies.lastContentPosX = dies.scrollView.content.x; } /**Holen Sie sich die lokalen Koordinaten des Elements in der ScrollView*/ private getPositionInView(item) { let worldPos = item.parent.convertToWorldSpaceAR(item.position); : Lassen Sie viewPos = this.scrollView.node.convertToNodeSpaceAR(worldPos); Ansichtspositionen zurückgeben; } /**Listendaten abrufen*/ öffentliche getListData() { gib diese.itemDataList zurück; } /** * Füge ein Datenelement am Ende der Liste hinzu * @param data data */ öffentliches addItem(Daten: beliebig) { this.itemDataList.push(Daten); dies.updateContent(); } /** * Füge ein Datenelement an der angegebenen Position der Liste hinzu * @param Indexposition, 0 bedeutet das erste Element * @param Daten Daten */ public addItemAt(index: Zahl, Daten: beliebig) { wenn (this.itemDataList[index] != null || this.itemDataList.length == index) { this.itemDataList.splice(index, 1, daten); dies.updateContent(); } } /** * Ein Datenelement löschen* @param index Die Position des zu löschenden Elements, 0 bedeutet das erste Element*/ öffentliches Löschelement (Index: Nummer) { wenn (this.itemDataList[index] != null) { Dies.itemDataList.splice(index, 1); dies.updateContent(); } } /** * Ein Datenelement ändern * @param Indexposition, 0 bedeutet das erste Element * @param Daten Zu ersetzende Daten */ öffentliches ChangeItem(Index: Zahl, Daten: beliebig) { wenn (this.itemDataList[index] != null) { this.itemDataList[index] = Daten; dies.updateContent(); } } /**Position des ersten Elements abrufen*/ private updateContent() { //Die Anzeigelisteninstanz ist 0, wenn (this.itemList.length == 0) { dies.countListParam(); dies.createList(0, neuer cc.Vec2(0, 0)); //Wenn die Anzahl der Instanzen in der Anzeigeliste nicht 0 ist, müssen Sie das Elementinstanz-Array neu anordnen} else { wenn (dieser.Typ == ListType.Vertical) { this.itemList.sort((a: beliebig, b: beliebig) => { Rückkehr per - ja; }); } sonst wenn (dieser.Typ == ListType.Horizontal) { this.itemList.sort((a: beliebig, b: beliebig) => { Rückgabewert ax - bx; }); } sonst wenn (dieser.Typ == ListType.Grid) { wenn (this.startAxis == StartAxisType.Vertical) { this.itemList.sort((a: beliebig, b: beliebig) => { Rückgabewert ax - bx; }); this.itemList.sort((a: beliebig, b: beliebig) => { Rückkehr per - ja; }); } sonst wenn (this.startAxis == StartAxisType.Horizontal) { this.itemList.sort((a: beliebig, b: beliebig) => { Rückkehr per - ja; }); this.itemList.sort((a: beliebig, b: beliebig) => { Rückgabewert ax - bx; }); } } dies.countListParam(); //Holen Sie sich den Datenindex, der für die erste Elementinstanz angezeigt werden muss. var startIndex = this.itemList[0].getComponent(ItemRender).itemIndex; wenn (dieser.Typ == ListType.Grid und diese.StartAxis == StartAxisType.Vertical) { startIndex += (startIndex + this.spawnCount) % this.gridCol; } sonst wenn (dieser.Typ == ListType.Grid und diese.startAxis == StartAxisType.Horizontal) { startIndex += (startIndex + this.spawnCount) % this.gridRow; } //Die x-Werte von getScrollOffset() und scrollToOffset() sind entgegengesetzt var offset: cc.Vec2 = this.scrollView.getScrollOffset(); offset.x = - offset.x; dies.createList(startIndex, offset); } } /**zerstören*/ öffentliche onDestroy() { //Listenelemente bereinigen let len = this.itemList.length; für (sei i = 0; i < len; i++) { wenn (cc.isValid(this.itemList[i], true)) { diese.itemList[i].destroy(); } } diese.itemList.length = 0; //Objektpool bereinigen len = this.itemPool.length; für (sei i = 0; i < len; i++) { wenn (cc.isValid(this.itemPool[i], true)) { dies.itemPool[i].destroy(); } } this.itemPool.length = 0; //Listendaten bereinigen this.itemDataList.length = 0; } } Oben finden Sie Einzelheiten zum Erstellen einer Liste in CocosCreator. Weitere Informationen zur CocosCreator-Liste finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: Mehrere wichtige MySQL-Variablen
>>: Detaillierte Erklärung zum Anzeigen und Festlegen von Dateiberechtigungen auf dem Mac
Wenn auf einer Seite mehrere Bilder eingefügt wer...
Im Vergleich zu fdisk wird parted weniger verwend...
Mithilfe der Vue-Sprache und Elementkomponenten m...
In letzter Zeit wurden in neuen Projekten Springc...
Dieses Mal haben wir einen RTMP-Liveübertragungss...
Frage Lassen Sie mich zunächst über das Problem s...
Inhaltsverzeichnis Vorwort Parameter analysieren ...
Vorwort Die logische Datenträgerverwaltung von lv...
Inhaltsverzeichnis 1. MySQL 8.0.18 installieren 2...
Inhaltsverzeichnis Spring Boot Docker Spring-Boot...
Inhaltsverzeichnis 1. Warteschlangen verstehen 2....
Bereiten Sie die Taschen vor Installieren Überprü...
Inhaltsverzeichnis Was ist virtueller Dom? Warum ...
Normalerweise verwende ich nginx als Reverse-Prox...
Inhaltsverzeichnis 1. Einleitung 2. Grundsatz Pra...