From 10198bf54cad06b3cac318c7ce88befcbba2aea7 Mon Sep 17 00:00:00 2001 From: leo <907600065@qq.com> Date: Mon, 6 Jan 2020 17:44:58 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96Listview=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E5=88=B0=E6=8C=87=E5=AE=9A=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=E4=B8=8E=E6=8F=92=E5=85=A5item?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ListViewV2Demo/assets/Scene/helloworldTs.fire | 243 +++++++++++++++++- ListViewV2Demo/assets/Script/HelloWorld.js | 8 +- .../assets/Script/ListViewFactory.ts | 38 ++- 3 files changed, 281 insertions(+), 8 deletions(-) diff --git a/ListViewV2Demo/assets/Scene/helloworldTs.fire b/ListViewV2Demo/assets/Scene/helloworldTs.fire index 1bd4a52..8a0a1ab 100644 --- a/ListViewV2Demo/assets/Scene/helloworldTs.fire +++ b/ListViewV2Demo/assets/Scene/helloworldTs.fire @@ -60,16 +60,19 @@ }, { "__id__": 6 + }, + { + "__id__": 15 } ], "_tag": -1, "_active": true, "_components": [ { - "__id__": 15 + "__id__": 21 }, { - "__id__": 16 + "__id__": 22 } ], "_prefab": null, @@ -533,6 +536,242 @@ "gap_x": 0, "gap_y": 0 }, + { + "__type__": "cc.Node", + "_name": "New Button", + "_objFlags": 0, + "_parent": { + "__id__": 2 + }, + "_children": [ + { + "__id__": 16 + } + ], + "_tag": -1, + "_active": true, + "_components": [ + { + "__id__": 18 + }, + { + "__id__": 19 + } + ], + "_prefab": null, + "_id": "1cCEojzRZBE5TlenfIjah+", + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_cascadeOpacityEnabled": true, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 100, + "height": 40 + }, + "_rotationX": 0, + "_rotationY": 0, + "_scaleX": 1, + "_scaleY": 1, + "_position": { + "__type__": "cc.Vec2", + "x": 0, + "y": -248 + }, + "_skewX": 0, + "_skewY": 0, + "_localZOrder": 0, + "_globalZOrder": 0, + "_opacityModifyRGB": false, + "groupIndex": 0 + }, + { + "__type__": "cc.Node", + "_name": "Label", + "_objFlags": 0, + "_parent": { + "__id__": 15 + }, + "_children": [], + "_tag": -1, + "_active": true, + "_components": [ + { + "__id__": 17 + } + ], + "_prefab": null, + "_id": "1aD68m3NBDgJvHRJX1dw+U", + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 0, + "g": 0, + "b": 0, + "a": 255 + }, + "_cascadeOpacityEnabled": true, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 100, + "height": 40 + }, + "_rotationX": 0, + "_rotationY": 0, + "_scaleX": 1, + "_scaleY": 1, + "_position": { + "__type__": "cc.Vec2", + "x": 0, + "y": 0 + }, + "_skewX": 0, + "_skewY": 0, + "_localZOrder": 0, + "_globalZOrder": 0, + "_opacityModifyRGB": false, + "groupIndex": 0 + }, + { + "__type__": "cc.Label", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 16 + }, + "_enabled": true, + "_useOriginalSize": false, + "_actualFontSize": 20, + "_fontSize": 20, + "_lineHeight": 40, + "_enableWrapText": false, + "_N$file": null, + "_isSystemFontUsed": true, + "_spacingX": 0, + "_N$string": "append", + "_N$horizontalAlign": 1, + "_N$verticalAlign": 1, + "_N$fontFamily": "Arial", + "_N$overflow": 1 + }, + { + "__type__": "cc.Sprite", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 15 + }, + "_enabled": true, + "_spriteFrame": { + "__uuid__": "f0048c10-f03e-4c97-b9d3-3506e1d58952" + }, + "_type": 1, + "_sizeMode": 0, + "_fillType": 0, + "_fillCenter": { + "__type__": "cc.Vec2", + "x": 0, + "y": 0 + }, + "_fillStart": 0, + "_fillRange": 0, + "_isTrimmedMode": true, + "_srcBlendFactor": 770, + "_dstBlendFactor": 771, + "_atlas": null + }, + { + "__type__": "cc.Button", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 15 + }, + "_enabled": true, + "transition": 2, + "pressedColor": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "hoverColor": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "duration": 0.1, + "zoomScale": 1.2, + "clickEvents": [ + { + "__id__": 20 + } + ], + "_N$interactable": true, + "_N$enableAutoGrayEffect": false, + "_N$normalColor": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_N$disabledColor": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_N$normalSprite": { + "__uuid__": "f0048c10-f03e-4c97-b9d3-3506e1d58952" + }, + "_N$pressedSprite": { + "__uuid__": "e9ec654c-97a2-4787-9325-e6a10375219a" + }, + "pressedSprite": { + "__uuid__": "e9ec654c-97a2-4787-9325-e6a10375219a" + }, + "_N$hoverSprite": { + "__uuid__": "e9ec654c-97a2-4787-9325-e6a10375219a" + }, + "hoverSprite": { + "__uuid__": "e9ec654c-97a2-4787-9325-e6a10375219a" + }, + "_N$disabledSprite": { + "__uuid__": "29158224-f8dd-4661-a796-1ffab537140e" + }, + "_N$target": { + "__id__": 15 + } + }, + { + "__type__": "cc.ClickEvent", + "target": { + "__id__": 2 + }, + "component": "HelloWorld", + "handler": "onEventClicked", + "customEventData": "" + }, { "__type__": "cc.Canvas", "_name": "", diff --git a/ListViewV2Demo/assets/Script/HelloWorld.js b/ListViewV2Demo/assets/Script/HelloWorld.js index e2787ef..b58743a 100644 --- a/ListViewV2Demo/assets/Script/HelloWorld.js +++ b/ListViewV2Demo/assets/Script/HelloWorld.js @@ -8,7 +8,13 @@ cc.Class({ start() { let script = this.listViewNode.getComponent('ListViewFactory'); - script.init([1, 2, 3, 4, 5, 6, 7, 8, 9]); + this.dataSize = 9; + script.init([1, 2, 3, 4, 5, 6, 7, 8, 9], 2); + }, + + onEventClicked() { + let script = this.listViewNode.getComponent('ListViewFactory'); + script.append(this.dataSize++); }, // called every frame diff --git a/ListViewV2Demo/assets/Script/ListViewFactory.ts b/ListViewV2Demo/assets/Script/ListViewFactory.ts index 1135500..4d09f60 100644 --- a/ListViewV2Demo/assets/Script/ListViewFactory.ts +++ b/ListViewV2Demo/assets/Script/ListViewFactory.ts @@ -36,16 +36,26 @@ export default class ListViewFactory extends cc.Component { listView: ListViewTs; - init(data: Array) { + init(data: Array, offsetIndex: number = 0, time: number = 0.5) { //下一帧执行，当使用widget适配高宽，可以取得真实长度。 this.scheduleOnce(() => { - this._init(data); + this._init(data, offsetIndex, time); }, 0); } - _init(data: Array) { + append(data: any) { + if (!this.listView) { + this.init([data]); + return; + } + this.listView.append_data(data); + } + + _init(data: Array, offsetIndex: number = 0, time: number = 0.5) { //初始化 let item = cc.instantiate(this.prefab); + let size = this.getItemSize(item, this.gap_x, this.gap_y); + this.listView = new ListViewTs({ scrollview: this.scrollview, mask: this.mask, @@ -60,8 +70,26 @@ export default class ListViewFactory extends cc.Component { }); //显示 this.listView.set_data(data); - this.scrollview.scrollToTop(); - this.scrollview.stopAutoScroll(); + let realIdx = Math.floor(offsetIndex / this.column); + if (realIdx > 0) { + let offSet = this.setOffsetByIndex(realIdx, this.direction, size); + this.scrollview.scrollToOffset(offSet, time); + } else { + this.scrollview.scrollToTop(); + this.scrollview.stopAutoScroll(); + } + } + + setOffsetByIndex(index: number, direction: number, size: cc.Size) { + if (direction == 1) { + return cc.v2(0, index * size.height); + } else { + return cc.v2(index * size.width, 0); + } + } + + getItemSize(node: cc.Node, x: number, y: number) { + return cc.size(node.width + x, node.height + y); } update(dt) {