优化Listview 添加移动到指定位置与插入item

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": "",

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

ListViewV2Demo/assets/Script/ListViewFactory.ts

@@ -36,16 +36,26 @@ export default class ListViewFactory extends cc.Component {
 
     listView: ListViewTs;
 
-    init(data: Array<any>) {
+    init(data: Array<any>, offsetIndex: number = 0, time: number = 0.5) {
         //下一帧执行，当使用widget适配高宽，可以取得真实长度。
         this.scheduleOnce(() => {
-            this._init(data);
+            this._init(data, offsetIndex, time);
         }, 0);
     }
 
-    _init(data: Array<any>) {
+    append(data: any) {
+        if (!this.listView) {
+            this.init([data]);
+            return;
+        }
+        this.listView.append_data(data);
+    }
+
+    _init(data: Array<any>, 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) {