demo

assets/demo.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "fc68b2f0-95ee-42cc-babd-05af9127f47b",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/demo/CCCExtension.ts

@@ -0,0 +1,169 @@
+import { EPSILON, Node, RenderData, StencilManager, UIRenderer, approx, cclegacy, clamp, gfx, log } from "cc";
+enum Stage {
+    // Stencil disabled
+    DISABLED = 0,
+    // Clear stencil buffer
+    CLEAR = 1,
+    // Entering a new level, should handle new stencil
+    ENTER_LEVEL = 2,
+    // In content
+    ENABLED = 3,
+    // Exiting a level, should restore old stencil or disable
+    EXIT_LEVEL = 4,
+    // Clear stencil buffer & USE INVERTED
+    CLEAR_INVERTED = 5,
+    // Entering a new level & USE INVERTED
+    ENTER_LEVEL_INVERTED = 6,
+}
+
+export default class CCCExtension {
+    static init() {
+        this._extendRender3_x();
+    }
+
+    private static _extendRender3_x() {
+        const batch2d = cclegacy[`internal`][`Batcher2D`];
+        let __renderQueue: Node[][] = [];
+
+        const levelSplit = (node: Node, lv: number, itemIndex) => {
+            if (!__renderQueue[lv]) {
+                __renderQueue[lv] = [];
+            }
+            __renderQueue[lv].push(node);
+            lv++;
+            node["__renderLv"] = lv;
+            node["__levelRender"] = true;
+            node["__itemIndex"] = itemIndex;
+            const cs = node.children;
+            for (let i = 0; i < cs.length; ++i) {
+                const c = cs[i];
+                if (!__renderQueue[lv]) {
+                    __renderQueue[lv] = [];
+                }
+                lv = levelSplit(c, lv, itemIndex);
+            }
+            return lv;
+        }
+        Object.defineProperty(batch2d.prototype, "walk", {
+            value: function (node: Node, level = 0) {
+                if (!node[`activeInHierarchy`]) {
+                    return;
+                }
+                const children = node.children;
+                const uiProps = node._uiProps;
+                const render = uiProps.uiComp as UIRenderer;
+                // Save opacity
+                let parentOpacity = 1;
+                if (node.parent) {
+                    parentOpacity = node.parent._uiProps.opacity;
+                }
+                let opacity = parentOpacity;
+                // TODO Always cascade ui property's local opacity before remove it
+                const selfOpacity = render && render.color ? render.color.a / 255 : 1;
+
+                opacity *= selfOpacity * uiProps.localOpacity;
+                // TODO Set opacity to ui property's opacity before remove it
+                if (uiProps[`setOpacity`]) {
+                    uiProps[`setOpacity`](opacity);
+                } else {
+                    uiProps[`_opacity`] = opacity;
+                }
+                if (!approx(opacity, 0, EPSILON)) {
+                    if (uiProps.colorDirty) {
+                        // Cascade color dirty state
+                        this._opacityDirty++;
+                    }
+
+                    // Render assembler update logic
+                    if (render && render.enabledInHierarchy) {
+                        render.fillBuffers(this);// for rendering
+                    }
+
+                    // Update cascaded opacity to vertex buffer
+                    if (this._opacityDirty && render && !render.useVertexOpacity && render.renderData && render.renderData.vertexCount > 0) {
+                        // HARD COUPLING
+                        updateOpacity(render.renderData, opacity);
+                        const buffer = render.renderData.getMeshBuffer();
+                        if (buffer) {
+                            buffer.setDirty();
+                        }
+                    }
+
+                    if (children.length > 0 && !node._static) {
+                        if (!node[`__levelRender`]) {
+                            __renderQueue = [];
+                            for (let i = 0; i < children.length; ++i) {
+                                const child = children[i];
+                                const enableLevelRender = node[`__enableLevelRender`];
+                                if (!enableLevelRender) {
+                                    this.walk(child, level);
+                                } else {
+                                    levelSplit(child, 0, i);
+                                }
+                            }
+                            while (__renderQueue.length > 0) {
+                                const list = __renderQueue.shift();
+                                if (list.length > 0) {
+                                    while (list.length > 0) {
+                                        const n = list.shift();
+                                        this.walk(n, level);
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    if (uiProps.colorDirty) {
+                        // Reduce cascaded color dirty state
+                        this._opacityDirty--;
+                        // Reset color dirty
+                        uiProps.colorDirty = false;
+                    }
+                }
+                // Restore opacity
+                // this._pOpacity = parentOpacity;
+
+                // Post render assembler update logic
+                // ATTENTION: Will also reset colorDirty inside postUpdateAssembler
+                if (render && render.enabledInHierarchy) {
+                    render.postUpdateAssembler(this);
+                    if ((render.stencilStage as any === Stage.ENTER_LEVEL || render.stencilStage as any === Stage.ENTER_LEVEL_INVERTED)
+                        && (StencilManager.sharedManager!.getMaskStackSize() > 0)) {
+                        this.autoMergeBatches(this._currComponent!);
+                        this.resetRenderStates();
+                        StencilManager.sharedManager!.exitMask();
+                    }
+                }
+                level += 1;
+            }
+        });
+    }
+}
+
+export function updateOpacity(renderData: RenderData, opacity: number) {
+    const vfmt = renderData.vertexFormat;
+    const vb = renderData.chunk.vb;
+    let attr; let format; let stride;
+    // Color component offset
+    let offset = 0;
+    for (let i = 0; i < vfmt.length; ++i) {
+        attr = vfmt[i];
+        format = gfx.FormatInfos[attr.format];
+        if (format.hasAlpha) {
+            stride = renderData.floatStride;
+            if (format.size / format.count === 1) {
+                const alpha = ~~clamp(Math.round(opacity * 255), 0, 255);
+                // Uint color RGBA8
+                for (let color = offset; color < vb.length; color += stride) {
+                    vb[color] = ((vb[color] & 0xffffff00) | alpha) >>> 0;
+                }
+            } else if (format.size / format.count === 4) {
+                // RGBA32 color, alpha at position 3
+                for (let alpha = offset + 3; alpha < vb.length; alpha += stride) {
+                    vb[alpha] = opacity;
+                }
+            }
+        }
+        offset += format.size >> 2;
+    }
+}

assets/demo/CCCExtension.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "ee2a11c5-09da-45a4-ba35-e08e57b3e388",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/demo/Item.prefab

@@ -0,0 +1,334 @@
+[
+  {
+    "__type__": "cc.Prefab",
+    "_name": "Item",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_native": "",
+    "data": {
+      "__id__": 1
+    },
+    "optimizationPolicy": 0,
+    "persistent": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Item",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 8
+      },
+      {
+        "__id__": 10
+      },
+      {
+        "__id__": 12
+      }
+    ],
+    "_prefab": {
+      "__id__": 14
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Label",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 5
+      }
+    ],
+    "_prefab": {
+      "__id__": 7
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_mobility": 0,
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 4
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 84.53,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "99WXCytTpDJaUHgBnsSY90"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 6
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_string": "label",
+    "_horizontalAlign": 1,
+    "_verticalAlign": 1,
+    "_actualFontSize": 40,
+    "_fontSize": 40,
+    "_fontFamily": "Arial",
+    "_lineHeight": 40,
+    "_overflow": 0,
+    "_enableWrapText": true,
+    "_font": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_isItalic": false,
+    "_isBold": false,
+    "_isUnderline": false,
+    "_underlineHeight": 2,
+    "_cacheMode": 2,
+    "_enableOutline": false,
+    "_outlineColor": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_outlineWidth": 2,
+    "_enableShadow": false,
+    "_shadowColor": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_shadowOffset": {
+      "__type__": "cc.Vec2",
+      "x": 2,
+      "y": 2
+    },
+    "_shadowBlur": 2,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "4b0Jv68x5C57fYyW1Xd0eL"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "f1eNllhSdJdamAkXyk8eNR",
+    "instance": null,
+    "targetOverrides": null,
+    "nestedPrefabInstanceRoots": null
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 9
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 100,
+      "height": 100
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "24rqGXNzdJG7douvaXvVPp"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 11
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 175,
+      "g": 211,
+      "b": 159,
+      "a": 255
+    },
+    "_spriteFrame": {
+      "__uuid__": "7d8f9b89-4fd1-4c9f-a3ab-38ec7cded7ca@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 0,
+    "_fillType": 0,
+    "_sizeMode": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "5c+opoJ2FJBom3VHk6i4OK"
+  },
+  {
+    "__type__": "417cf4N2NNHB7VMscG3Qlox",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 13
+    },
+    "lbl": {
+      "__id__": 5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "4fxIFH0GBOsIhVFP+yqEBn"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "7aGBu2+tVB37gUIuab2WDf",
+    "instance": null,
+    "targetOverrides": null
+  }
+]

assets/demo/Item.prefab.meta

@@ -0,0 +1,13 @@
+{
+  "ver": "1.1.50",
+  "importer": "prefab",
+  "imported": true,
+  "uuid": "518ab7b7-13a6-4cf0-9ab1-f5e9c6094a8b",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {
+    "syncNodeName": "Item"
+  }
+}

assets/demo/Item.ts

@@ -0,0 +1,18 @@
+import { Label } from 'cc';
+import { _decorator, Component, Node } from 'cc';
+const { ccclass, property } = _decorator;
+
+export interface IItem {
+    id: number
+}
+@ccclass('Item')
+export class Item extends Component {
+    @property(Label)
+    lbl: Label = null;
+
+    setData(p: IItem) {
+        this.lbl.string = `${p.id}`
+    }
+}
+
+

assets/demo/Item.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "417cfe0d-d8d3-4707-b54c-b1c1b7425a31",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/demo/LevelRender.ts

@@ -0,0 +1,11 @@
+import { _decorator, Component, Node } from 'cc';
+const { ccclass, property, menu } = _decorator;
+
+@ccclass('LevelRender')
+@menu("性能优化/LevelRender")
+export class LevelRender extends Component {
+    onLoad() {
+        this.node[`__enableLevelRender`] = true;
+    }
+}
+

assets/demo/LevelRender.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "4440b178-0803-41b1-bb7f-390c9a2b32a5",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/demo/RecycleScroll.ts

@@ -0,0 +1,304 @@
+import { Component, Node, Prefab, ScrollView, UITransform, Vec2, _decorator, error, instantiate, isValid, log, v2, v3 } from "cc";
+const { ccclass, property, menu } = _decorator;
+
+let createFlag = 0;
+
+/**
+ * 循环+分帧滑动面板
+ */
+@ccclass('RecycleScroll')
+@menu("性能优化/RecycleScroll")
+export default class RecycleScroll extends Component {
+    /** item预制 */
+    @property(Prefab)
+    itemPrefab: Prefab = null;
+
+    /** item间隔 */
+    @property(Vec2)
+    spacing: Vec2 = v2();
+
+    /** item数量 */
+    private _numItems: number = 0;
+    public get numItems() {
+        return this._numItems;
+    }
+    public set numItems(value: number) {
+        this._numItems = value;
+        this._hideAllItems();
+        this._initialize();
+        this._updateContentHeight();
+        this.updateAllItems();
+    }
+
+    /** 视图内显示列数 */
+    private _viewCol: number = 0;
+    /** 视图内显示行数 */
+    private _viewRow: number = 0;
+    /** 视图窗宽 */
+    private _viewW: number = 0;
+    /** 视图窗高 */
+    private _viewH: number = 0;
+    /** item格子宽 */
+    private _itemW: number = 0;
+    /** item格子高 */
+    private _itemH: number = 0;
+    /** content上一次y坐标 */
+    private _lastPosY: number = 0;
+    /** 是否已初始化 */
+    private _isInit: boolean = false;
+    /** item的index */
+    private _itemsUUIDToIndex: { [uuid: string]: number } = {};
+
+    // private _itemsIndexToNode: { [index: string]: Node } = {};
+
+    private _fleshInterval: number = 0.2;
+    private _fleshCounter: number = 0;
+    private _initTimer: number = 0.05;
+    private _initCounter: number = 0;
+    private _isResize: boolean = false;
+    private _itemStartPos: Vec2 = v2();
+    private _isResizeFinish: boolean = false;
+    private _lineIndex: number = -1;
+
+    /** item列表 */
+    public itemList: Node[] = [];
+    /** item父节点 */
+    public content: UITransform = null;
+
+    /** item刷新回调 */
+    public onItemRender(index: number, node: Node) { }
+    /** item点击回调 */
+    public onItemClicked(index: number, node: Node) { }
+
+    /** 刷新所有item */
+    public updateAllItems() {
+        this.itemList.forEach((item: Node) => this._updateItem(this._itemsUUIDToIndex[item.uuid], item, true));
+    }
+
+    public scrollToIndexVertical(index: number, duration: number = 0.2) {
+        const contentUTF = this._getContentUTF();
+        const p = (this._itemH * index) / (contentUTF.height - this._viewH);
+        this.node.getComponent(ScrollView).scrollToPercentVertical(1 - p, duration);
+    }
+
+    public getItemDirPos(itemIndex: number) {
+        const x = (itemIndex % this._viewCol) * this._itemW;
+        const y = -Math.floor(itemIndex / this._viewCol) * this._itemH + (this.spacing.y >> 1);
+        const contentUTF = this._getContentUTF();
+        const wpos = contentUTF.convertToWorldSpaceAR(v3(x, y));
+        const parentUTF = this._getContentUTF().node.parent.getComponent(UITransform);
+        const itemInViewPos = parentUTF.convertToNodeSpaceAR(wpos);
+        let horizon = 0;
+        let vertical = 0;
+        horizon = itemInViewPos.x < -this._viewW / 2 ? -1 : (itemInViewPos.x > this._viewW / 2 ? 1 : 0);
+        vertical = itemInViewPos.y < -this._viewH / 2 ? -1 : (itemInViewPos.y > this._viewH / 2 ? 1 : 0);
+        return [horizon, vertical];
+    }
+
+    protected onLoad(): void {
+        this.node.on(Node.EventType.SIZE_CHANGED, this.onSizeChange, this);
+    }
+
+    protected onSizeChange() {
+        this._isResize = true;
+        this._initCounter = 0;
+        this._itemsUUIDToIndex = {};
+        // this.itemList = [];
+        this._getContentUTF().node.removeAllChildren();
+    }
+
+    protected onDestroy(): void {
+        this.node.targetOff(this);
+        // screen.off(`window-resize`, this.onWindowResize, this);
+    }
+
+    private _hideAllItems() {
+        this.itemList.forEach((item: Node, index: number) => item.active = false);
+    }
+
+    /** 获取content */
+    private _getContentUTF() {
+        return this.node.getComponent(ScrollView).content.getComponent(UITransform);
+    }
+
+    /** 初始化 */
+    private _initialize() {
+        if (this._isInit) return;
+        const scroll = this.node.getComponent(ScrollView);
+        scroll.enabled = false;
+        this._isInit = true;
+        const content = this._getContentUTF();
+        this.content = content;
+        content.node.removeAllChildren()
+        this.itemList = [];
+        const viewUTF = content.node.parent.getComponent(UITransform);
+        this._viewW = viewUTF.width;
+        this._viewH = viewUTF.height;
+
+        const itemData = this.itemPrefab.data.getComponent(UITransform);
+        this._itemW = itemData.width + this.spacing.x;
+        this._itemH = itemData.height + this.spacing.y;
+
+        this._lastPosY = content.node.position.y;
+        this._viewRow = Math.ceil(this._viewH / this._itemH) + 1;
+        this._viewCol = Math.floor(this._viewW / this._itemW);
+        const surplusW = this._viewW - (this._viewCol * this._itemW);
+        const startPos = v2((-this._viewW >> 1) + (this._itemW >> 1) + (surplusW >> 1), -this._itemH >> 1);
+        this._itemStartPos = startPos;
+
+        const cNum = this._viewRow * this._viewCol;
+        log(`实例化数量:${cNum}`);
+
+        let createNum = 0;
+        const createFunc = (index: number) => {
+            if (!isValid(content)) return; //异步创建，创建完回来父节点有可能已经被销毁
+            const item = instantiate(this.itemPrefab);
+            item.parent = content.node;
+            const x = (index % this._viewCol) * this._itemW;
+            const y = -Math.floor(index / this._viewCol) * this._itemH + (this.spacing.y >> 1);
+            const pos = v3(x + startPos.x, y + startPos.y);
+            item.setPosition(pos);
+            item.on(Node.EventType.TOUCH_END, () => {
+                this.onItemClicked(this._itemsUUIDToIndex[item.uuid], item);
+            }, this);
+
+            this.itemList[index] = item;
+
+            item["needRender"] = true;
+            this._updateItem(index, item);
+
+            this._itemsUUIDToIndex[item.uuid] = index;
+
+            createNum++;
+            if (createNum == cNum) {
+                scroll.enabled = true;
+            }
+        }
+        createFlag++;
+        /** 分帧创建item */
+        frameLoad(cNum, createFunc, 16, 0, createFlag);
+    }
+
+    /** 更新centent高度 */
+    private _updateContentHeight() {
+        const content = this._getContentUTF();
+        const col = Math.floor(this._viewW / this._itemW);
+        const row = Math.ceil(this.numItems / col);
+        content.height = row * (this.itemPrefab.data.getComponent(UITransform).height + this.spacing.y) - (this.spacing.y);
+    }
+
+    /** 获取item在view坐标系的对标 */
+    private _getPosInView(item: Node) {
+        const content = this._getContentUTF();
+        const viewUTF = content.node.parent.getComponent(UITransform);
+        const wpos = content.convertToWorldSpaceAR(item.position);
+        const lpos = viewUTF.convertToNodeSpaceAR(wpos);
+        return lpos;
+    }
+
+    /** 更新item */
+    private _updateItem(index: number, item: Node, force = false) {
+        const isShow = index >= 0 && index < this.numItems;
+        item.active = isShow;
+        if (isShow) {
+            if (item["needRender"] || force) {
+                this.onItemRender(index, item);
+                item["needRender"] = false;
+            }
+        }
+    }
+
+    public update(dt: number) {
+        if (this._isResize) {
+            this._initCounter += dt;
+            if (this._initCounter >= this._initTimer) {
+                this._isInit = false;
+                this._isResize = false;
+                this.numItems = this._numItems;
+                this._isResizeFinish = true;
+            }
+            return;
+        }
+        const content = this._getContentUTF();
+        const currY = content.node.position.y;
+        const dtY = currY - this._lastPosY;
+        this._lastPosY = currY;
+        this._fleshCounter += dt;
+        if (dtY == 0 && !this._isResizeFinish) return;
+        const isDown = dtY < 0;
+        const viewHalfH = this._viewH >> 1;
+        const itemHalfH = this._itemH >> 1;
+        const lineIndex = Math.floor((currY - viewHalfH) / this._itemH);
+        let isLineChange = this._lineIndex != lineIndex;
+        if (!isLineChange && !this._isResizeFinish) return;
+        this._isResizeFinish = false;
+        this._lineIndex = lineIndex;
+        const pageHeight = this._itemH * this._viewRow;
+        const pageLen = this._viewRow * this._viewCol;
+        const pageIndex = Math.floor((currY - viewHalfH) / pageHeight);
+        const itemsLen = this.itemList.length;
+        for (let i = 0; i < itemsLen; ++i) {
+            const index = i;
+            const item = this.itemList[i];
+            const x = (index % this._viewCol) * this._itemW;
+            const y = -Math.floor(index / this._viewCol) * this._itemH + (this.spacing.y >> 1);
+            const pos = v3(x + this._itemStartPos.x, y + this._itemStartPos.y - pageIndex * (pageHeight));
+            item.setPosition(pos);
+
+            const posInView = this._getPosInView(item);
+            const lastIndex = this._itemsUUIDToIndex[item.uuid];
+            let currIndex = pageIndex * pageLen + i;
+            if (!isDown) {
+                if (posInView.y >= (viewHalfH + itemHalfH)) {
+                    item.setPosition(v3(item.position.x, item.position.y - (this._viewRow * this._itemH)));
+                    currIndex += itemsLen;
+                }
+            } else {
+                if (posInView.y >= viewHalfH + itemHalfH) {
+                    item.setPosition(v3(item.position.x, item.position.y - (this._viewRow * this._itemH)));
+                    currIndex += itemsLen;
+                }
+                if (isLineChange) {
+                    const posInView = this._getPosInView(item);
+                    if (posInView.y <= -(viewHalfH + itemHalfH)) {
+                        item.setPosition(v3(item.position.x, item.position.y + (this._viewRow * this._itemH)));
+                        currIndex -= itemsLen;
+                    }
+                }
+            }
+            if (currIndex != lastIndex) {
+                item["needRender"] = true;
+                this._updateItem(currIndex, item);
+            }
+            this._itemsUUIDToIndex[item.uuid] = currIndex;
+        }
+    }
+}
+
+/** 分帧执行 */
+function frameLoad(loopTimes: number, func: Function, frameTime: number = 16, __index: number = 0, flag = 0) {
+    let loop = loopTimes;
+    let start = new Date().getTime();
+    let end = 0;
+    let dt = 0;
+    for (let i = 0; i < loop; ++i) {
+        if (flag != createFlag) break;
+        if (__index >= loop) {
+            break;
+        }
+        try {
+            func && func(__index);
+        } catch (e) {
+            error(e);
+        }
+        __index++;
+        end = new Date().getTime();
+        dt = end - start;
+        if (dt > frameTime) {
+            setTimeout(() => {
+                frameLoad(loop, func, frameTime, __index, flag);
+            }, 10);
+            break;
+        }
+    }
+}

assets/demo/RecycleScroll.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "3b299c27-eed8-441c-8841-ccc1f1fd7c43",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/demo/demo.scene.meta

@@ -0,0 +1,11 @@
+{
+  "ver": "1.1.50",
+  "importer": "scene",
+  "imported": true,
+  "uuid": "5f18812b-2121-4a62-bccd-4b8af6ed4e1d",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {}
+}

assets/demo/demo.ts

@@ -0,0 +1,35 @@
+import { _decorator, Component, Node } from 'cc';
+import CCCExtension from './CCCExtension';
+import RecycleScroll from './RecycleScroll';
+import { Item } from './Item';
+
+const { ccclass, property } = _decorator;
+
+@ccclass('Launc')
+export class Launc extends Component {
+    @property(RecycleScroll)
+    itemScroll: RecycleScroll = null;
+
+    onLoad(): void {
+        CCCExtension.init()
+        this.itemScroll.onItemRender = this.onItemRender.bind(this);
+    }
+
+    start() {
+        this.itemScroll.numItems = 15;
+    }
+
+    onItemRender(index: number, node: Node) {
+        node.getComponent(Item).setData({ id: index })
+    }
+
+    click() {
+        if (this.itemScroll.numItems == 15) {
+            this.itemScroll.numItems = 1000
+        } else {
+            this.itemScroll.numItems = 15
+        }
+    }
+}
+
+

assets/demo/demo.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "c097bf58-892c-4906-98db-75abb313fbf8",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}