@cc-component/cc-ex-component 1.2.8 → 1.2.9

package/assets/core/BaseReference.ts

@@ -18,8 +18,12 @@ export class BaseReference extends Component {
     }
 
     onLoadFinish() {
-        if (this.vmParams) this.viewModel?.refreshUI(this.vmParams)
+        if (this.vmParams) {
+            this.viewModel?.refreshUI(this.vmParams)
+            // this.vmParams = null
+        }
     }
+
     //#endregion
     defineProperty(propertyKey: string) {
         Object.defineProperty(this, propertyKey, { get: () => this.rc?.get(propertyKey), set: (value) => { }, configurable: true });
@@ -28,6 +32,11 @@ export class BaseReference extends Component {
 
     refreshUI(vmParams: any) {
         this.vmParams = vmParams;
+        if (this.vmParams) {
+            this.viewModel?.refreshUI(this.vmParams)
+            ///  this.vmParams = null
+        }
+
     }
     protected onDestroy(): void {
 

package/assets/core/ReferenceComponent.ts

@@ -1,5 +1,6 @@
 import { Sprite } from "cc";
 import { assetManager } from "cc";
+import { Button } from "cc";
 import { Enum } from "cc";
 import { _decorator, Component, js, Node } from "cc";
 import { EDITOR_NOT_IN_PREVIEW } from "cc/env";
@@ -84,6 +85,7 @@ export class ReferenceComponent extends Component {
     comList2 = ["YXCollectionView", "TableView"]
     comList_base = ["EditBox", "Toggle", "ToggleContainer", "Slider", "Button", "ProgressBar"]
 
+    skipList = ["Button"]//跳过按钮类型
     protected onLoad(): void {
         if (EDITOR_NOT_IN_PREVIEW) {//处理编辑器逻辑
             this.initNodeList();
@@ -212,7 +214,6 @@ export class ReferenceComponent extends Component {
     public refreshUI(data: ${iinterface}) { super.refreshUI(data); }   
     
     // ✅ 使用新装饰器（自动响应式 + 路径推导）
-    @BindViewModel(${className}Data)
     viewModel: ${className}Data;`
         text += viewModel + "\n\n"
         text += `    // ✅ UI属性`
@@ -253,10 +254,12 @@ export class ReferenceComponent extends Component {
                 bind_pix = `@BindTable`
             }
 
-            let bind = `${bind_pix}("${name}"${this.comList.includes(type) ? event : ""})`
-            if (true) {
-                bind = `${bind_pix}("${name}"${this.comList2.includes(type) ? event : ""})`
+
+            let bind = `${bind_pix}("${name}"${this.comList2.includes(type) ? event : ""})`
+            if (this.skipList.includes(type)) {
+                bind = `${bind_pix}()`
             }
+
             if (this.comList_base.includes(type)) {
 
                 eventStr += `
@@ -299,12 +302,14 @@ export class ReferenceComponent extends Component {
             let key = data.key;
             let name = key[0].toLowerCase() + key.substring(1);
             const type = this.getPropertyType(data.com)
-            //@ts-ignore
-            let line = `    ${name}: ${this.getDataTypeByComponentType(type)};`//`private get ${name}() { return this.rc.get("${key}", ${this.getPropertyType(data.node)}); }`;
-            sx += line + "" + (index < this.nodes.length - 1 ? "\n" : "");
+            if (!this.skipList.includes(type)) {
+                //@ts-ignore
+                let line = `    ${name}: ${this.getDataTypeByComponentType(type)};`//`private get ${name}() { return this.rc.get("${key}", ${this.getPropertyType(data.node)}); }`;
+                sx += line + "" + (index < this.nodes.length - 1 ? "\n" : "");
 
-            let line_sx = `        this.${name} = ${this.getDataTypeByComponentTypeValue(type)}`
-            sx_this += line_sx + (index < this.nodes.length - 1 ? "\n" : "");
+                let line_sx = `        this.${name} = ${this.getDataTypeByComponentTypeValue(type)}`
+                sx_this += line_sx + (index < this.nodes.length - 1 ? "\n" : "");
+            }
         });
 
         text = `
@@ -371,6 +376,7 @@ const { ccclass, property } = _decorator;
         this.viewModel.loadData()
     }`
         const classView = `
+@BindViewModel(${className}Data)
 @ccclass('${className}')
 export class ${className} extends ViewModel(BaseReference) {${sx.text}\n${onload}\n\n${sx.event}\n}`
 

package/assets/core/ViewModel.ts

@@ -16,10 +16,12 @@ import { YXFlowLayout } from '../lib/collectView/lib_collect/yx-flow-layout';
 import { math } from 'cc';
 import { YXCollectionView, YXIndexPath } from '../lib/collectView/lib_collect/yx-collection-view';
 import { EventTouch } from 'cc';
+import { YXPagelayout } from '../lib/collectView/lib_collect/yx-page-layout';
 
 interface IBindingData extends ITableViewEvents, IBindingDataEvents {
     dataPath: string;
     type: any;
+    propertyKey?: string;
     // 允许任意额外属性
     [key: string]: any;
 }
@@ -73,6 +75,50 @@ export const refMap: Map<string, string[]> = new Map();
 //     "cc.Toggle": Toggle,
 //     "cc.Button": Button,
 // }
+export function BindViewModel<T extends new () => any>(constructor: T) {
+    return function (target: any) {
+        const onLoad = target.prototype.onLoad;
+        /**
+         * 重载onload 注入更新
+         */
+        target.prototype.onLoad = function () {
+            onLoad.call(this);
+            const className = js.getClassName(target);
+            if (!bindingMap.has(className)) {
+                bindingMap.set(className, new Map());
+            }
+            //console.log('onLoad我的', this.node.name)
+            if (!this._bindings) this._bindings = [];
+
+            const map = bindingMap.get(className)
+            for (const [propertyKey, value] of map) {
+                //属性绑定
+                this.initReferenceCollector();
+                this.defineProperty(propertyKey);
+
+                //设置类型
+                const com = this[propertyKey];
+                const classname = js.getClassName(com)
+                value.type = classname
+                //                console.log('属性绑定', propertyKey, value.type, com, this)
+                // 记录绑定关系到实例
+                this._bindings.push({ uiProp: value.propertyKey, dataPath: value.dataPath });
+                // 初始化 UI
+                const value_data = this._getNestedValue(this, value.dataPath);
+                const data = map.get(propertyKey)
+                updateStatus(data, com, value_data, this);
+            }
+
+            // 创建实例并转为响应式
+            const vm_data = 'viewModel'
+            const instance = new constructor();
+            this[vm_data] = this._makeReactive(instance, vm_data);
+
+            this.onLoadFinish();
+        };
+    };
+
+}
 
 /**
  * 数据绑定装饰器
@@ -80,50 +126,35 @@ export const refMap: Map<string, string[]> = new Map();
  * @param reset 重写赋值方法，自定义实现. 参数：(self 组件所在的父类，com 组件，value 值)          
  * @param event 点击事件，滑动事件，等等. 参数：(self 组件所在的父类)
  */
-export function Bind<T extends Component>(dataPath: string, param?: IBindingDataEvents) {
-    dataPath = baseData + '.' + dataPath;
+export function Bind<T extends Component>(path?: string, param?: IBindingDataEvents) {
+    const dataPath = baseData + '.' + path;
     return function (target: any, propertyKey: string) {
-        const className = js.getClassName(target.constructor);
-        if (!bindingMap.has(className)) {
-            bindingMap.set(className, new Map());
-        }
+        const className = js.getClassName(target);
         const data: IBindingData = {
-            dataPath: dataPath, type: null, reset: param?.reset, event: param?.event,
+            propertyKey: propertyKey,
+            dataPath: dataPath, type: className, reset: param?.reset, event: param?.event,
             itemSize: null,
             cellForItemAt: null,
             numberOfItems: null,
+            touchStart: param?.touchStart,
+            touchMove: param?.touchMove,
+            touchEnd: param?.touchEnd,
+            touchCancel: param?.touchCancel,
         }
 
+        if (!bindingMap.has(className)) { bindingMap.set(className, new Map()); }
         bindingMap.get(className)!.set(propertyKey, data);
-        // 重写 onLoad 以初始化绑定
-        const originalOnLoad = target.constructor.prototype.onLoad;
-        target.constructor.prototype.onLoad = function () {
-            originalOnLoad?.call(this);
-            const com = this[propertyKey];
-            const classname = js.getClassName(com)
-            data.type = classname;
-            bindingMap.get(className)!.set(propertyKey, data);
-            // 初始化 UI
-            const value = this._getNestedValue(this, dataPath);
-            if (com) {
-                updateStatus(data, com, value, this)
-            }
-
-            // 记录绑定关系到实例
-            if (!this._bindings) this._bindings = [];
-            this._bindings.push({ uiProp: propertyKey, dataPath });
-        };
     };
 }
 
+
 export function BindTable<T extends Component>(dataPath: string, param?: ITableViewEvents) {
     dataPath = baseData + '.' + dataPath;
     return function (target: any, propertyKey: string) {
         const className = js.getClassName(target.constructor);
-        if (!bindingMap.has(className)) {
-            bindingMap.set(className, new Map());
-        }
         const data: IBindingData = {
+            propertyKey: propertyKey,
+
             dataPath: dataPath, type: null,
             itemSize: param.itemSize,
             cellForItemAt: param.cellForItemAt,
@@ -131,26 +162,8 @@ export function BindTable<T extends Component>(dataPath: string, param?: ITableV
             onTouchCellAt: param.onTouchCellAt,
             moveFinish: param.moveFinish,
         }
-
+        if (!bindingMap.has(className)) { bindingMap.set(className, new Map()); }
         bindingMap.get(className)!.set(propertyKey, data);
-        // 重写 onLoad 以初始化绑定
-        const originalOnLoad = target.constructor.prototype.onLoad;
-        target.constructor.prototype.onLoad = function () {
-            originalOnLoad?.call(this);
-            const com = this[propertyKey];
-            const classname = js.getClassName(com)
-            data.type = classname;
-            bindingMap.get(className)!.set(propertyKey, data);
-            // 初始化 UI
-            const value = this._getNestedValue(this, dataPath);
-            if (com) {
-                updateStatus(data, com, value, this)
-            }
-
-            // 记录绑定关系到实例
-            if (!this._bindings) this._bindings = [];
-            this._bindings.push({ uiProp: propertyKey, dataPath });
-        };
     };
 }
 
@@ -158,11 +171,9 @@ export function BindCollect<T extends Component>(dataPath: string, param?: IColl
     dataPath = baseData + '.' + dataPath;
     return function (target: any, propertyKey: string) {
         const className = js.getClassName(target.constructor);
-        if (!bindingMap.has(className)) {
-            bindingMap.set(className, new Map());
-        }
 
         const data: IBindingData = {
+            propertyKey: propertyKey,
             dataPath: dataPath, type: null,
             layout: param.layout,
             cellForItemAt: param.cellForItemAt as any,
@@ -170,31 +181,8 @@ export function BindCollect<T extends Component>(dataPath: string, param?: IColl
             itemSize: param.itemSize as any,
             onTouchCellAt: param.onTouchCellAt,
         }
-
-        // layout: (self: any) => YXFlowLayout,
-        // cellForItemAt: (self: any, indexPath: YXIndexPath, collectionView: YXCollectionView) => Node
-        // itemSize?: ((self: any, indexPath: YXIndexPath, layout: YXFlowLayout, collectionView: YXCollectionView) => math.Size),
-        // onTouchCellAt?: (self: any, indexPath: YXIndexPath) => void
-        // numberOfItems?: ((self: any, section: number, collectionView: YXCollectionView) => number);
+        if (!bindingMap.has(className)) { bindingMap.set(className, new Map()); }
         bindingMap.get(className)!.set(propertyKey, data);
-        // 重写 onLoad 以初始化绑定
-        const originalOnLoad = target.constructor.prototype.onLoad;
-        target.constructor.prototype.onLoad = function () {
-            originalOnLoad?.call(this);
-            const com = this[propertyKey];
-            const classname = js.getClassName(com)
-            data.type = classname;
-            bindingMap.get(className)!.set(propertyKey, data);
-            // 初始化 UI
-            const value = this._getNestedValue(this, dataPath);
-            if (com) {
-                updateStatus(data, com, value, this)
-            }
-
-            // 记录绑定关系到实例
-            if (!this._bindings) this._bindings = [];
-            this._bindings.push({ uiProp: propertyKey, dataPath });
-        };
     };
 }
 /**
@@ -285,19 +273,20 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
 
     const sx = data.dataPath.split('.').pop();
     const tempData = { value: value, skip: false }
+    //console.log("updateStatus", data.propertyKey)
     switch (data.type) {
         case 'cc.Label':
             if (data.reset) {
                 data.reset(self, value, com);
             } else {
-                if (value) (com as Label).string = value?.toString() || '';
+                if (value != undefined && value !== null) (com as Label).string = value?.toString() || '';
             }
             break;
         case 'cc.RichText':
             if (data.reset) {
                 data.reset(self, value, com);
             } else
-                if (value)
+                if (value != undefined && value !== null)
                     (com as RichText).string = value?.toString() || '';
             break;
         case 'cc.Sprite':
@@ -306,7 +295,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
             if (data.reset) {
                 data.reset(self, value, com);
             } else
-                if (value) (com as Sprite).spriteFrame = value;
+                if (value != undefined && value !== null) (com as Sprite).spriteFrame = value;
             break;
         case 'cc.Button':
             const com_btn = (com as Button);
@@ -316,21 +305,25 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                 com_btn.node.active = value ?? true;
 
             //事件点击
+
             const touch_click = 'CallClick'
-            com_btn.node.off(Button.EventType.CLICK, com_btn[touch_click]);
-            tempData.skip = true;
-            const btnCall = (btn) => {
-                tempData.value = btn.node.active
-                self.viewModel[sx] = tempData
-                data.event?.(self)
-                self[`onClick_${sx}`]?.(btn)
+            if (!com_btn[touch_click]) {
+                const sx = data.propertyKey;
+                com_btn.node.off(Button.EventType.CLICK, com_btn[touch_click]);
+                tempData.skip = true;
+                const btnCall = (btn) => {
+                    tempData.value = btn.node.active
+                    self.viewModel[sx] = tempData
+                    data.event?.(self)
+                    self[`onClick_${sx}`]?.(btn)
+                }
+                com_btn[touch_click] = btnCall
+                com_btn.node.on(Button.EventType.CLICK, btnCall);
             }
-            com_btn[touch_click] = btnCall
-            com_btn.node.on(Button.EventType.CLICK, com_btn[touch_click]);
 
             //touch
-            if (data.touchStart) {
-                const touch_start = 'CALL_TOUCH_START'
+            let touch_start = 'CALL_TOUCH_START'
+            if (data.touchStart && !com_btn[touch_start]) {
                 com_btn.node.off(Node.EventType.TOUCH_START, com_btn[touch_start]);
                 const call_start = (btn) => {
                     data.touchStart?.(self, btn)
@@ -338,8 +331,8 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                 com_btn[touch_start] = call_start
                 com_btn.node.on(Node.EventType.TOUCH_START, com_btn[touch_start]);
             }
-            if (data.touchMove) {
-                const touch_start = 'CALL_TOUCH_MOVE'
+            touch_start = 'CALL_TOUCH_MOVE'
+            if (data.touchMove && !com_btn[touch_start]) {
                 com_btn.node.off(Node.EventType.TOUCH_MOVE, com_btn[touch_start]);
                 const call_start = (btn) => {
                     data.touchMove?.(self, btn)
@@ -347,8 +340,8 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                 com_btn[touch_start] = call_start
                 com_btn.node.on(Node.EventType.TOUCH_MOVE, com_btn[touch_start]);
             }
-            if (data.touchEnd) {
-                const touch_start = 'CALL_TOUCH_END'
+            touch_start = 'CALL_TOUCH_END'
+            if (data.touchEnd && !com_btn[touch_start]) {
                 com_btn.node.off(Node.EventType.TOUCH_END, com_btn[touch_start]);
                 const call_start = (btn) => {
                     data.touchEnd?.(self, btn)
@@ -356,8 +349,8 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                 com_btn[touch_start] = call_start
                 com_btn.node.on(Node.EventType.TOUCH_END, com_btn[touch_start]);
             }
-            if (data.touchCancel) {
-                const touch_start = 'CALL_TOUCH_CANCEL'
+            touch_start = 'CALL_TOUCH_CANCEL'
+            if (data.touchCancel && !com_btn[touch_start]) {
                 com_btn.node.off(Node.EventType.TOUCH_CANCEL, com_btn[touch_start]);
                 const call_start = (btn) => {
                     data.touchCancel?.(self, btn)
@@ -370,70 +363,88 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
             if (data.reset) {
                 data.reset(self, value, com);
             } else
-                if (value) (com as ProgressBar).progress = Number(value) || 0;
+                if (value != undefined && value !== null) (com as ProgressBar).progress = Number(value) || 0;
             break;
         case 'cc.Skeleton':
             if (data.reset) {
                 data.reset(self, value, com);
             } else
-                if (value) (com as sp.Skeleton).skeletonData = value
+                if (value != undefined && value !== null) (com as sp.Skeleton).skeletonData = value
             break;
         case 'cc.Slider':
-            const com_sld = (com as Slider);
-            if (data.reset) {
-                data.reset(self, value, com);
-            } else
-                if (value) com_sld.progress = Number(value) || 0;
-
-            //事件
-            com_sld.node.off("slide", com_sld['slideCall'], self)
-            tempData.skip = true;
-            const slideCall = (slider) => {
-                tempData.value = slider.progress
-                self.viewModel[sx] = tempData
-                data.event?.(self)
-                self[`onClick_${sx}`]?.(slider)
+            {
+                const com_sld = (com as Slider);
+                if (data.reset) {
+                    data.reset(self, value, com);
+                } else
+                    if (value != undefined && value !== null) com_sld.progress = Number(value) || 0;
+
+                //事件
+                const touch_click = 'slideCall'
+                if (!com_sld[touch_click]) {
+                    const sx = data.propertyKey;
+                    com_sld.node.off("slide", com_sld[touch_click], self)
+                    tempData.skip = true;
+                    const slideCall = (slider) => {
+                        tempData.value = slider.progress
+                        self.viewModel[sx] = tempData
+                        data.event?.(self)
+                        self[`onClick_${sx}`]?.(slider)
+                    }
+                    com_sld[touch_click] = slideCall
+                    com_sld.node.on('slide', slideCall, self);
+                }
             }
-            com_sld['slideCall'] = slideCall
-            com_sld.node.on('slide', slideCall, self);
             break;
         case 'cc.Toggle':
-            const com_tg = (com as Toggle);
-            if (data.reset) {
-                data.reset(self, value, com);
-            } else
-                if (value) com_tg.isChecked = Boolean(value);
-
-            //事件
-            com_tg.node.off(Toggle.EventType.TOGGLE, com_tg['toggleCall'], self)
-            tempData.skip = true;
-            const toggleCall = (toggle) => {
-                tempData.value = toggle.isChecked
-                self.viewModel[sx] = tempData
-                data.event?.(self)
-                self[`onClick_${sx}`]?.(toggle)
+            {
+                const com_tg = (com as Toggle);
+                if (data.reset) {
+                    data.reset(self, value, com);
+                } else
+                    if (value != undefined && value !== null) com_tg.isChecked = Boolean(value);
+
+                //事件
+                const touch_click = 'toggleCall'
+                if (!com_tg[touch_click]) {
+                    const sx = data.propertyKey;
+                    com_tg.node.off(Toggle.EventType.TOGGLE, com_tg[touch_click], self)
+                    tempData.skip = true;
+                    const toggleCall = (toggle) => {
+                        tempData.value = toggle.isChecked
+                        self.viewModel[sx] = tempData
+                        data.event?.(self)
+                        self[`onClick_${sx}`]?.(toggle)
+                    }
+                    com_tg[touch_click] = toggleCall
+                    com_tg.node.on(Toggle.EventType.TOGGLE, toggleCall, self);
+                }
             }
-            com_tg['toggleCall'] = toggleCall
-            com_tg.node.on(Toggle.EventType.TOGGLE, toggleCall, self);
             break;
         case 'cc.EditBox':
-            const com_eb = (com as EditBox);
-            if (data.reset) {
-                data.reset(self, value, com);
-            } else
-                if (value) com_eb.string = value?.toString() || '';
-
-            //事件
-            com_eb.node.off("text-changed", com_eb['ebCall'], self)
-            tempData.skip = true;
-            const ebCall = (editbox: EditBox) => {
-                tempData.value = editbox.textLabel.string
-                self.viewModel[sx] = tempData
-                data.event?.(self)
-                self[`onClick_${sx}`]?.(editbox)
+            {
+                const com_eb = (com as EditBox);
+                if (data.reset) {
+                    data.reset(self, value, com);
+                } else
+                    if (value != undefined && value !== null) com_eb.string = value?.toString() || '';
+
+                //事件
+                const touch_click = 'ebCall'
+                if (!com_eb[touch_click]) {
+                    const sx = data.propertyKey;
+                    com_eb.node.off("text-changed", com_eb[touch_click], self)
+                    tempData.skip = true;
+                    const ebCall = (editbox: EditBox) => {
+                        tempData.value = editbox.textLabel.string
+                        self.viewModel[sx] = tempData
+                        data.event?.(self)
+                        self[`onClick_${sx}`]?.(editbox)
+                    }
+                    com_eb[touch_click] = ebCall
+                    com_eb.node.on('text-changed', ebCall, self);
+                }
             }
-            com_eb['ebCall'] = ebCall
-            com_eb.node.on('text-changed', ebCall, self);
             break;
         case 'cc.ToggleContainer':
             {
@@ -444,6 +455,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
 
                 //事件
                 if (com_tgc.checkEvents.length <= 0) {
+                    const sx = data.propertyKey;
                     const funcName = "onClick_ToggleContainer"
                     const clickEventHandler = new EventHandler();
                     clickEventHandler.target = self.node; // 这个 node 节点是你的事件处理代码组件所属的节点
@@ -474,7 +486,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                 // ✅ 关键：不要缓存 count，而是通过 dataPath 动态取值
                 const getLatestDataLength = () => {
                     const latestValue = self._getNestedValue(self, data.dataPath);
-                    return Array.isArray(latestValue) ? latestValue.length : 0;
+                    return latestValue ? latestValue.length : 0;
                 };
 
                 if (com_list.isInit) {
@@ -525,13 +537,21 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                     // const width = 100
                     // const height = 163
                     // layout.itemSize = math.size(width, height)
-                    table_collection.layout = data.layout()
+                    table_collection.layout = data.layout(self)
                     // 注册列表内需要使用的 cell 节点类型
                     // 这个演示是通过编辑器绑定的，可以查看场景内 list 节点里的 register cells 配置
                     // this.table_collection.register('cell', () => instantiate('your cell prefab'))
                     // 确定列表内一共需要显示多少条内容
                     //  table_collection.isCenterShow = false;//少于宽度，居中显示
-                    table_collection.numberOfItems = () => getLatestDataLength()
+                    table_collection.numberOfItems = () => {
+                        const count = data.numberOfItems ? data.numberOfItems(self) : getLatestDataLength()
+                        if (table_collection.layout instanceof YXPagelayout) {
+                            table_collection.layout.dataCount = count
+                            return count * 3
+                        } else {
+                            return count
+                        }
+                    }
                     table_collection.cellForItemAt = (indexPath, collectionView) => {
                         return data.cellForItemAt(self, indexPath, collectionView as any) // 返回这个节点给列表显示
                     }
@@ -547,8 +567,9 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                 table_collection.reloadData()
             }
             break;
-        default:
-            console.error(`请检查类型: ${data.type}`);
+        default: {
+            if (com) console.error(`请检查类型: ${data.type}`);
+        }
     }
 
 }
@@ -560,33 +581,11 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
  * 响应式数据装饰器
  * 自动将属性转为响应式对象，并使用属性名作为路径前缀
  */
-export function BindViewModel<T extends new () => any>(constructor: T) {
-    return function (target: any, propertyKey: string) {
-        const originalOnLoad = target.constructor.prototype.onLoad;
-        target.constructor.prototype.onLoad = function () {
-            // 创建实例并转为响应式
-            const instance = new constructor();
-            this[propertyKey] = this._makeReactive(instance, propertyKey);
-            originalOnLoad?.call(this);
-        };
-    };
-}
 
 // 定义装饰器
 export function Ref(target: any, propertyKey: string) {
-
     const className = js.getClassName(target)
     if (!refMap.has(className)) { refMap.set(className, []) }
     const refList = refMap.get(className)
-    if (refList.length <= 0) {
-        const originalOnLoad = target.constructor.prototype.onLoad;
-        target.constructor.prototype.onLoad = function (this: any) {
-            this.initReferenceCollector();
-            this.defineProperty(propertyKey);
-            originalOnLoad?.call(this);
-            this.onLoadFinish();
-        };
-
-    }
     refList.push(propertyKey)
 }

package/assets/lib/collectView/lib_collect/yx-collection-view.ts

@@ -522,6 +522,20 @@ export abstract class YXLayout {
      * 列表组件销毁时执行  
      */
     onDestroy() { }
+
+
+    //#region 新加
+    /**
+    * 转换为真实索引  
+    * 列表数量大小为 3 倍实际数据数量，需要通过求余方式获取数据，避免数组越界
+    */
+    dataCount: number = 0
+    originIndex(index: number): number {
+        return 0
+    }
+    originIndexCount(): number {
+        return this.dataCount * 3
+    }
 }
 
 /**

package/assets/lib/collectView/lib_collect/yx-flow-layout.ts

@@ -100,11 +100,18 @@ enum _yx_flow_layout_section_kinds {
  */
 export class YXFlowLayout extends YXBinaryLayout {
 
-    /**
-     * 是否开启分页滚动效果
-     */
-    pagingEnabled: boolean = false
 
+    //  pagingEnabled: boolean = false
+    _pagingEnabled: boolean = false
+    set pagingEnabled(value: boolean) {
+        this._pagingEnabled = value
+    }
+    /**
+   * 是否开启分页滚动效果
+   */
+    get pagingEnabled() {
+        return this._pagingEnabled
+    }
     /**
      * 分页吸附动画时间  
      */
@@ -119,7 +126,7 @@ export class YXFlowLayout extends YXBinaryLayout {
     /**
      * 约束优先级  
      */
-    priority: _yx_flow_layout_priority = YXFlowLayout.Priority.LEFT
+    priority: _yx_flow_layout_priority = YXFlowLayout.Priority.SIDE
     static Priority = _yx_flow_layout_priority
 
     /**

package/assets/lib/collectView/lib_collect/yx-page-layout.ts

@@ -0,0 +1,100 @@
+import { ScrollView } from "cc";
+import { YXFlowLayout } from "./yx-flow-layout";
+import { YXCollectionView, YXIndexPath } from "./yx-collection-view";
+import { math } from "cc";
+
+
+export class YXPagelayout extends YXFlowLayout {
+
+    _pagingEnabledLoop = false
+    set pagingEnabledLoop(value: boolean) {
+        this._pagingEnabledLoop = value
+    }
+    get pagingEnabledLoop() {
+        return this._pagingEnabledLoop
+    }
+    /**
+      * 记录当前页面
+      */
+    pageIdx: number = -1
+
+    collectionView: YXCollectionView
+    scrollView: ScrollView;
+    dataCount: number = 0
+
+
+    pageAction: (idx: number) => void
+    loop(collectionView: YXCollectionView) {
+        /**
+         * 无限轮播实现思路
+         * 列表容器总体大小为 数据条数 * 3 的大小，每次在滚动结束的时候，偏移量总是复位到中间的位置，以此来实现无限滚动  
+         * 比如原始数据 [ 0,1,2 ]，实际上在列表中为 [ 0,1,2, 0,1,2, 0,1,2 ]，每次滑动结束之后位置总是复位到中间区域  
+         */
+
+        // 注册列表内需要使用的 cell 节点类型
+        // 这个演示是通过编辑器绑定的，可以查看场景内 list 节点里的 register cells 配置
+        // this.listComp.register(`cell`, () => instantiate('your cell prefab'))
+        this.collectionView = collectionView
+        this.scrollView = collectionView.scrollView
+        this.scrollView.node.on(ScrollView.EventType.SCROLLING, this.checkPageChange, this)
+        this.scrollView.node.on(ScrollView.EventType.SCROLL_ENDED, this.resetOffset, this)
+        this.pagingEnabled = true;
+        this.collectionView.recycleInterval = 0
+    }
+
+    onDestroy(): void {
+        this.scrollView.node.off(ScrollView.EventType.SCROLLING, this.checkPageChange, this)
+        this.scrollView.node.off(ScrollView.EventType.SCROLL_ENDED, this.resetOffset, this)
+    }
+
+    /**
+  * 获取当前页面索引
+  * @returns 
+  */
+    getCurrentPageIndex(): number {
+        let offset = this.collectionView.scrollView.getScrollOffset()
+        offset.x = - offset.x
+        let idx = Math.round(offset.x / this.collectionView.scrollView.view.width)
+        return idx
+    }
+
+    /**
+* 检查页面变化
+*/
+    checkPageChange() {
+        const idx = this.getCurrentPageIndex()
+        if (this.pageIdx !== idx) {
+            this.pageIdx = idx
+            // 走到这里表示页面发生变化，可以处理需要处理的逻辑
+            this.pageAction && this.pageAction(this.originIndex(this.pageIdx))
+            console.log(this.originIndex(this.pageIdx));
+
+        }
+    }
+
+    /**
+     * 使列表复位到中间区域
+     */
+    resetOffset() {
+        let offset = this.scrollView.getScrollOffset()
+        offset.x = - offset.x
+        let idx = Math.round(offset.x / this.scrollView.view.width) % this.dataCount
+        offset.x = this.scrollView.view.width * (this.dataCount + idx)
+        this.scrollView.scrollToOffset(offset)
+        // 直接设置滚动位置不会触发刷新，这里强制刷新一下
+        this.collectionView.markForUpdateVisibleData(true)
+    }
+
+    /**
+ * 转换为真实索引  
+ * 列表数量大小为 3 倍实际数据数量，需要通过求余方式获取数据，避免数组越界
+ */
+    originIndex(index: number): number {
+        return index % this.dataCount
+    }
+    originIndexCount(): number {
+        return this.dataCount * 3
+    }
+}
+
+

package/assets/lib/collectView/lib_collect/yx-page-layout.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "b0ea1fb4-0c5b-4be8-8e3b-11a9dc7f1a10",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/lib/tableView/ListView.ts

@@ -82,7 +82,7 @@ export class scroll_config {
     })
     cellSpaceRight: number = 20
 
-    @property({ displayName: `整页滚动>>>>` })
+    @property({ displayName: `整页滚动`, tooltip: `需要设置左右间距：总宽ContentSize/2-cell宽/2` })
     isPage: boolean = false
 
     @property({

package/assets/lib/tableView/ListViewPage.ts

@@ -28,7 +28,7 @@ export class ListViewPage extends ListView {
         this.node.on(ScrollView.EventType.SCROLL_BEGAN, this.onTouchStart, this);
         this.node.on(ScrollView.EventType.TOUCH_UP, this.onTouchEnd, this);
         this.node.on(ScrollView.EventType.SCROLLING, this._scrollViewDidScroll, this);
-        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
+        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
 
         //ScrollView.EventType
     }
@@ -83,7 +83,9 @@ export class ListViewPage extends ListView {
             this.content = content
             viewMask.getComponent(Widget).updateAlignment()
         }
+
         this.contentUT = this.content.getComponent(UITransform)
+        let count = 0
         if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
             this.contentUT.anchorX = this.config.isLoop ? 0.5 : 0
             this.contentUT.anchorY = 0.5
@@ -91,10 +93,13 @@ export class ListViewPage extends ListView {
             this.contentUT.anchorX = 0.5
             this.contentUT.anchorY = this.config.isLoop ? 0.5 : 1
         }
+
         this.nodeUT.setAnchorPoint(0.5, 0.5)
         const mask_node = this.content.parent.getComponent(UITransform)
         this.contentUT.contentSize = new Size(mask_node.width, mask_node.height)
         this.scrollTo(v2(0))
+
+
     }
     initView() {
         if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
@@ -119,7 +124,7 @@ export class ListViewPage extends ListView {
         this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
         this.node.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
         this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
-        this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
+        this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
 
     }
 
@@ -208,6 +213,7 @@ export class ListViewPage extends ListView {
 
 
     _reloadData() {
+        this.stopAutoScroll()
         let numberOfItems = this.delegate.numberOfItems();
         this.numberOfItems = numberOfItems;
 
@@ -235,7 +241,7 @@ export class ListViewPage extends ListView {
         }
         let offsetMax = this.getMaxScrollOffset();
 
-        this.stopAutoScroll()
+
 
         this.scrollToOffset(v2(-offset.x, offset.y))
         this.isReload = true;
@@ -296,6 +302,7 @@ export class ListViewPage extends ListView {
         start_pos = this.getShowRowListPos()
 
         this.visbleCellList.forEach((cell, index) => {
+            console.log(`cell.row:${cell.row_data},${cell.row}`)
             let x = 0;
             if (lastCell) {
                 if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
@@ -358,27 +365,40 @@ export class ListViewPage extends ListView {
             target_pos = v3(0, 0, 0)
             currentRow = 0
         }
+
         const count = Math.max(showChount - (showChount - currentRow), 0);
 
         const width = this.getWidth() + this.config.cellSpace;
         const max_height = width * count
         let start = 0
         if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
-            start = (target_pos.x - max_height)
-            if (start <= 0) {
-                start = start + this.getWidth() * 0.5
+            if (target_pos) {
+
+                start = (target_pos.x - max_height)
+                // if (max_height === 0) { start = 0 }
+                if (start <= 0) {
+                    start = start + this.getWidth() * 0.5
+                }
+                if (this.lastCellCount <= 0) {
+                    start += this.config.cellSpaceLeft
+                }
             }
-            if (this.lastCellCount <= 0) {
-                start += this.config.cellSpaceLeft
+            else {
+                start += this.config.cellSpaceLeft + this.getWidth() * 0.5
             }
         } else {
-            start = (target_pos.y + max_height)
-            if (start >= 0) {
-                start = start - this.getWidth() * 0.5
-            }
-            if (this.lastCellCount <= 0) {
-                start -= this.config.cellSpaceLeft
+            if (target_pos) {
+                start = (target_pos.y + max_height)
+                if (start >= 0) {
+                    start = start - this.getWidth() * 0.5
+                }
+                if (this.lastCellCount <= 0) {
+                    start -= this.config.cellSpaceLeft
+                }
+            } else {
+                start += this.config.cellSpaceLeft + this.getWidth() * 0.5
             }
+
         }
 
         return start
@@ -392,13 +412,12 @@ export class ListViewPage extends ListView {
         const count_n = this.numberOfItems - this.max_row_data;
         let row = count_n > 0 ? this.min_row_data : Math.max(this.min_row_data - (-count_n + 1), 0)
         if (this.visbleCellList.length > 0) {
-            if (this.numberOfItems > this.config.maxShowCount &&
-                this.currentRow < this.numberOfItems - 1 &&
-                this.max_row_data + 1 < this.numberOfItems &&
+            const ok_1 = this.numberOfItems > this.config.maxShowCount
+            const ok_2 = this.currentRow < this.numberOfItems - 1
+            const ok_3 = this.max_row_data + 1 < this.numberOfItems
+            const ok_4 = (this.currentRow === this.visbleCellList[this.visbleCellList.length - 1].row_data || this.currentRow === this.visbleCellList[this.visbleCellList.length - 2].row_data)
 
-                (this.currentRow === this.visbleCellList[this.visbleCellList.length - 1].row_data ||
-                    this.currentRow === this.visbleCellList[this.visbleCellList.length - 2].row_data)
-            ) {
+            if (ok_1 && ok_2 && ok_3 && ok_4 && row != 0) {
                 row += 1;
                 this.max_row_data += 1
                 //console.error("走了", this.max_row_data)
@@ -457,6 +476,22 @@ export class ListViewPage extends ListView {
             this.touchEnd(event, false)
         }
 
+    }
+    onTouchCancel(event: EventTouch) {
+
+        if (this.config.isPage)
+            this.onTouchEnd(event)
+
+        // const of = this.getScrollOffset()
+        // if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
+        //     if (of.x < 0)
+        //         this.onTouchEnd(event)
+        // } else {
+        //     if (of.x < 0)
+        //         this.onTouchEnd(event)
+        // }
+
+
     }
 
     touchEnd(event: EventTouch, isInit) {
@@ -637,6 +672,7 @@ export class ListViewPage extends ListView {
     _scrollViewDidScrollPage(is_move = false) {
         this._updateMaxNode()
         const of = this.getScrollOffset();
+        //   console.log(of)
         if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
             this.velocity = Math.abs((of.x - this.lastOffset.x))
         } else {

package/assets/lib/tableView/ListViewPageLoop.ts

@@ -584,7 +584,7 @@ export class ListViewPageLoop extends ListView {
             this.currentRow = this.maxNode.row_data;
 
         } else {
-            console.error("没有")
+            //console.error("没有")
         }
     }
     _scrollViewDidScrollPage(is_move: boolean = false) {

package/assets/lib/tableView/TableView.ts

@@ -33,29 +33,49 @@ export class TableView extends Component {
         return this.delegate ? true : false;
     }
     finish: Function;
+    isOnload = false;
     //  view: Node;
     protected onLoad(): void {
         if (this.config.isLoop) {
             this.scrollView = this.node.addComponent(ListViewPageLoop)
+            this.scrollView.elastic = false
         } else {
             this.scrollView = this.node.addComponent(ListViewPage)
+            this.scrollView.elastic = this.config.isPage ? false : true
         }
         this.scrollView.elastic = false
+
         this.scrollView.delegate = this.delegate;
         this.scrollView.config = this.config;
         this.scrollView.init();
-        this.finish?.()
+        this.isOnload = true
+        if (this.finish) {
+            this.finish()
+        }
+
     }
     init(delegate: IListView) {
         this.delegate = delegate
         //解决一些设置时间点慢的问题
         if (this.scrollView) {
             this.scrollView.delegate = delegate
+            const itemSize = this.delegate.itemSize();
+            let count = 0
+            if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
+                count = this.scrollView.nodeUT.width / (itemSize.width + this.config.cellSpace)//+ this.config.cellSpaceLeft + this.config.cellSpaceRight
+            } else {
+                count = this.scrollView.nodeUT.height / (itemSize.height + this.config.cellSpace)//+ this.config.cellSpaceLeft + this.config.cellSpaceRight
+            }
+            this.config.maxShowCount = Math.max(Math.floor(count) + 3, this.config.maxShowCount)
+            console.log("maxShowCount", this.config.maxShowCount)
         }
-
     }
     onLoadFinish(call: () => void) {
         this.finish = call
+        if (this.isOnload) {
+            this.finish?.()
+            this.finish = null
+        }
     }
 
     public reload() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cc-component/cc-ex-component",
-    "version": "1.2.8",
+    "version": "1.2.9",
     "engine": ">=3.8.6",
     "description": "系统组件添加常用扩展方法",
     "main": "index.ts",