diff --git a/list-3x/assets/common-cells/page-element.prefab b/list-3x/assets/common-cells/page-element.prefab
new file mode 100644
index 0000000..cbfb79b
--- /dev/null
+++ b/list-3x/assets/common-cells/page-element.prefab
@@ -0,0 +1,658 @@
+[
+  {
+    "__type__": "cc.Prefab",
+    "_name": "page-element",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_native": "",
+    "data": {
+      "__id__": 1
+    },
+    "optimizationPolicy": 0,
+    "persistent": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "page-element",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      },
+      {
+        "__id__": 10
+      },
+      {
+        "__id__": 18
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 27
+      },
+      {
+        "__id__": 29
+      }
+    ],
+    "_prefab": {
+      "__id__": 31
+    },
+    "_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": "shape",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 5
+      },
+      {
+        "__id__": 7
+      }
+    ],
+    "_prefab": {
+      "__id__": 9
+    },
+    "_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": 400,
+      "height": 1000
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "38Ctl8rrVBIIzUsgoEVl18"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 6
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 85,
+      "g": 71,
+      "b": 56,
+      "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": "e5z4rNsp5IqKHKYrZmbbGr"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 8
+    },
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 100,
+    "_originalHeight": 100,
+    "_alignMode": 1,
+    "_lockFlags": 45,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "16YuS9Y1RIHL3+RkLAY9ri"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "50E3C8mxhHcLBLSMVIqx2D",
+    "instance": null,
+    "targetOverrides": null,
+    "nestedPrefabInstanceRoots": null
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "label",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 11
+      },
+      {
+        "__id__": 13
+      },
+      {
+        "__id__": 15
+      }
+    ],
+    "_prefab": {
+      "__id__": 17
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 454.8,
+      "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__": 10
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 12
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 63.3837890625,
+      "height": 50.4
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "227SaOS3lF15buT8rVMsrU"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 10
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 14
+    },
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_string": "label",
+    "_horizontalAlign": 1,
+    "_verticalAlign": 1,
+    "_actualFontSize": 30,
+    "_fontSize": 30,
+    "_fontFamily": "Arial",
+    "_lineHeight": 40,
+    "_overflow": 0,
+    "_enableWrapText": true,
+    "_font": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_isItalic": false,
+    "_isBold": false,
+    "_isUnderline": false,
+    "_underlineHeight": 2,
+    "_cacheMode": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "452rD9FHJNEZN1iBdm4Ra3"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 10
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 16
+    },
+    "_alignFlags": 17,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 20,
+    "_bottom": 0,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_alignMode": 1,
+    "_lockFlags": 17,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "c4+eUG/NhA7LESiCzTGhbg"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "db55RKuw1JC52K7YOxNE+s",
+    "instance": null,
+    "targetOverrides": null,
+    "nestedPrefabInstanceRoots": null
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "list",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 19
+      },
+      {
+        "__id__": 21
+      },
+      {
+        "__id__": 24
+      }
+    ],
+    "_prefab": {
+      "__id__": 26
+    },
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": -60,
+      "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__": 18
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 20
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 400,
+      "height": 880
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "5dhyHuI65FV7IT7n6wbI2F"
+  },
+  {
+    "__type__": "f94cbxum3xAsomhVNW1piY0",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 18
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 22
+    },
+    "mask": true,
+    "scrollEnabled": true,
+    "wheelScrollEnabled": false,
+    "scrollDirection": 1,
+    "mode": 0,
+    "preloadNodesLimitPerFrame": 2,
+    "frameInterval": 1,
+    "recycleInterval": 1,
+    "autoReloadOnSizeChange": true,
+    "registerCellForEditor": [
+      {
+        "__id__": 23
+      }
+    ],
+    "registerSupplementaryForEditor": [],
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "08ri/AdJ1DXbmTgNAS+Z/f"
+  },
+  {
+    "__type__": "_yx_editor_register_element_info",
+    "prefab": {
+      "__uuid__": "c8b689a4-ae47-4041-8c9c-7298939e76be",
+      "__expectedType__": "cc.Prefab"
+    },
+    "identifier": "cell",
+    "comp": ""
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 18
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 25
+    },
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 120,
+    "_bottom": 0,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 100,
+    "_originalHeight": 100,
+    "_alignMode": 1,
+    "_lockFlags": 45,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "9faoiM3ilPwZBJ1szRVcqX"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "eaMIqsGr9F+bNhvWAL0QNX",
+    "instance": null,
+    "targetOverrides": null,
+    "nestedPrefabInstanceRoots": null
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 28
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 400,
+      "height": 1000
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "65OHSX1lBN0p7gbe3Wj+iU"
+  },
+  {
+    "__type__": "8081ftYWzZM978tGrmRuUfA",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 30
+    },
+    "titleLabel": {
+      "__id__": 13
+    },
+    "listComp": {
+      "__id__": 21
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "62r7cYEdJJ3I7gDFST7oVR"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "aanzQWNlJP9JX9MJIPpZk7",
+    "instance": null,
+    "targetOverrides": null
+  }
+]
\ No newline at end of file
diff --git a/list-3x/assets/common-cells/page-element.prefab.meta b/list-3x/assets/common-cells/page-element.prefab.meta
new file mode 100644
index 0000000..45b55b0
--- /dev/null
+++ b/list-3x/assets/common-cells/page-element.prefab.meta
@@ -0,0 +1,13 @@
+{
+  "ver": "1.1.45",
+  "importer": "prefab",
+  "imported": true,
+  "uuid": "7c5f26c4-f052-40b0-9788-c0e5c4f209b2",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {
+    "syncNodeName": "page-element"
+  }
+}
diff --git a/list-3x/assets/common-cells/page-element.ts b/list-3x/assets/common-cells/page-element.ts
new file mode 100644
index 0000000..8a45589
--- /dev/null
+++ b/list-3x/assets/common-cells/page-element.ts
@@ -0,0 +1,33 @@
+import { _decorator, Component, Label, Node } from 'cc';
+import { YXCollectionView } from '../lib/yx-collection-view';
+import { YXTableLayout } from '../lib/yx-table-layout';
+const { ccclass, property } = _decorator;
+
+@ccclass('PageElement')
+export class PageElement extends Component {
+    @property(Label)
+    titleLabel: Label = null
+
+    @property(YXCollectionView)
+    listComp: YXCollectionView = null
+
+    protected start(): void {
+        this.listComp.numberOfItems = () => {
+            return 10000
+        }
+        this.listComp.cellForItemAt = (indexPath, collectionView) => {
+            const cell = collectionView.dequeueReusableCell(`cell`)
+            cell.getChildByName('label').getComponent(Label).string = `${indexPath}`
+            return cell
+        }
+
+        let layout = new YXTableLayout()
+        layout.spacing = 10
+        layout.rowHeight = 100
+        this.listComp.layout = layout
+
+        this.listComp.reloadData()
+    }
+}
+
+
diff --git a/list-3x/assets/common-cells/page-element.ts.meta b/list-3x/assets/common-cells/page-element.ts.meta
new file mode 100644
index 0000000..adfb04a
--- /dev/null
+++ b/list-3x/assets/common-cells/page-element.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "8081fb58-5b36-4cf7-bf2d-1ab991b947c0",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/list-3x/assets/home/grid.scene b/list-3x/assets/home/grid.scene
new file mode 100644
index 0000000..db1e0ce
--- /dev/null
+++ b/list-3x/assets/home/grid.scene
@@ -0,0 +1,575 @@
+[
+  {
+    "__type__": "cc.SceneAsset",
+    "_name": "grid",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_native": "",
+    "scene": {
+      "__id__": 1
+    }
+  },
+  {
+    "__type__": "cc.Scene",
+    "_name": "grid",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      }
+    ],
+    "_active": true,
+    "_components": [],
+    "_prefab": {
+      "__id__": 13
+    },
+    "_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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "autoReleaseAssets": false,
+    "_globals": {
+      "__id__": 14
+    },
+    "_id": "85f5e60f-5f3d-42a9-871d-7e695a424d93"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Canvas",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 5
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 9
+      },
+      {
+        "__id__": 10
+      },
+      {
+        "__id__": 11
+      },
+      {
+        "__id__": 12
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 360,
+      "y": 640,
+      "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": "beI88Z2HpFELqR4T5EMHpg"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Camera",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 1000
+    },
+    "_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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "ebFwiq8gBFaYpqYbdoDODe"
+  },
+  {
+    "__type__": "cc.Camera",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 3
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_projection": 0,
+    "_priority": 0,
+    "_fov": 45,
+    "_fovAxis": 0,
+    "_orthoHeight": 640,
+    "_near": 0,
+    "_far": 1000,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_depth": 1,
+    "_stencil": 0,
+    "_clearFlags": 7,
+    "_rect": {
+      "__type__": "cc.Rect",
+      "x": 0,
+      "y": 0,
+      "width": 1,
+      "height": 1
+    },
+    "_aperture": 19,
+    "_shutter": 7,
+    "_iso": 0,
+    "_screenScale": 1,
+    "_visibility": 1108344832,
+    "_targetTexture": null,
+    "_postProcess": null,
+    "_usePostProcess": false,
+    "_cameraType": -1,
+    "_trackingType": 0,
+    "_id": "63WIch3o5BEYRlXzTT0oWc"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "list",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 6
+      },
+      {
+        "__id__": 7
+      }
+    ],
+    "_prefab": null,
+    "_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": "d1/dCc9yNJ44lI4TRGfy4z"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 720,
+      "height": 1280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "315xpp6rxGVIpwfAByHAu2"
+  },
+  {
+    "__type__": "f94cbxum3xAsomhVNW1piY0",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "mask": true,
+    "scrollEnabled": true,
+    "wheelScrollEnabled": true,
+    "scrollDirection": 1,
+    "mode": 0,
+    "preloadNodesLimitPerFrame": 2,
+    "frameInterval": 1,
+    "recycleInterval": 1,
+    "autoReloadOnSizeChange": false,
+    "registerCellForEditor": [
+      {
+        "__id__": 8
+      }
+    ],
+    "registerSupplementaryForEditor": [],
+    "_id": "540sP7RuVMr66Fyji3wiJs"
+  },
+  {
+    "__type__": "_yx_editor_register_element_info",
+    "prefab": {
+      "__uuid__": "c8b689a4-ae47-4041-8c9c-7298939e76be",
+      "__expectedType__": "cc.Prefab"
+    },
+    "identifier": "cell",
+    "comp": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 720,
+      "height": 1280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "d6rUX5yfhMlKoWX2bSbawx"
+  },
+  {
+    "__type__": "cc.Canvas",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_cameraComponent": {
+      "__id__": 4
+    },
+    "_alignCanvasWithScreen": true,
+    "_id": "12O/ljcVlEqLmVm3U2gEOQ"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 5.684341886080802e-14,
+    "_bottom": 5.684341886080802e-14,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": "c5V1EV8IpMtrIvY1OE9t2u"
+  },
+  {
+    "__type__": "602edmasWxHMY+0WrUVIhcv",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_id": "597Xe6AAxAUKkZXOTkRnHK"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": null,
+    "asset": null,
+    "fileId": "5d2f3c26-c7d2-48bd-bd13-ca5aa20a93c4",
+    "instance": null,
+    "targetOverrides": null
+  },
+  {
+    "__type__": "cc.SceneGlobals",
+    "ambient": {
+      "__id__": 15
+    },
+    "shadows": {
+      "__id__": 16
+    },
+    "_skybox": {
+      "__id__": 17
+    },
+    "fog": {
+      "__id__": 18
+    },
+    "octree": {
+      "__id__": 19
+    },
+    "skin": {
+      "__id__": 20
+    },
+    "lightProbeInfo": {
+      "__id__": 21
+    },
+    "bakedWithStationaryMainLight": false,
+    "bakedWithHighpLightmap": false
+  },
+  {
+    "__type__": "cc.AmbientInfo",
+    "_skyColorHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyColor": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyIllumHDR": 20000,
+    "_skyIllum": 20000,
+    "_groundAlbedoHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_groundAlbedo": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_skyColorLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.5,
+      "z": 0.8,
+      "w": 1
+    },
+    "_skyIllumLDR": 20000,
+    "_groundAlbedoLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.2,
+      "z": 0.2,
+      "w": 1
+    }
+  },
+  {
+    "__type__": "cc.ShadowsInfo",
+    "_enabled": false,
+    "_type": 0,
+    "_normal": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 1,
+      "z": 0
+    },
+    "_distance": 0,
+    "_shadowColor": {
+      "__type__": "cc.Color",
+      "r": 76,
+      "g": 76,
+      "b": 76,
+      "a": 255
+    },
+    "_maxReceived": 4,
+    "_size": {
+      "__type__": "cc.Vec2",
+      "x": 512,
+      "y": 512
+    }
+  },
+  {
+    "__type__": "cc.SkyboxInfo",
+    "_envLightingType": 0,
+    "_envmapHDR": null,
+    "_envmap": null,
+    "_envmapLDR": null,
+    "_diffuseMapHDR": null,
+    "_diffuseMapLDR": null,
+    "_enabled": false,
+    "_useHDR": true,
+    "_editableMaterial": null,
+    "_reflectionHDR": null,
+    "_reflectionLDR": null,
+    "_rotationAngle": 0
+  },
+  {
+    "__type__": "cc.FogInfo",
+    "_type": 0,
+    "_fogColor": {
+      "__type__": "cc.Color",
+      "r": 200,
+      "g": 200,
+      "b": 200,
+      "a": 255
+    },
+    "_enabled": false,
+    "_fogDensity": 0.3,
+    "_fogStart": 0.5,
+    "_fogEnd": 300,
+    "_fogAtten": 5,
+    "_fogTop": 1.5,
+    "_fogRange": 1.2,
+    "_accurate": false
+  },
+  {
+    "__type__": "cc.OctreeInfo",
+    "_enabled": false,
+    "_minPos": {
+      "__type__": "cc.Vec3",
+      "x": -1024,
+      "y": -1024,
+      "z": -1024
+    },
+    "_maxPos": {
+      "__type__": "cc.Vec3",
+      "x": 1024,
+      "y": 1024,
+      "z": 1024
+    },
+    "_depth": 8
+  },
+  {
+    "__type__": "cc.SkinInfo",
+    "_enabled": false,
+    "_blurRadius": 0.01,
+    "_sssIntensity": 3
+  },
+  {
+    "__type__": "cc.LightProbeInfo",
+    "_giScale": 1,
+    "_giSamples": 1024,
+    "_bounces": 2,
+    "_reduceRinging": 0,
+    "_showProbe": true,
+    "_showWireframe": true,
+    "_showConvex": false,
+    "_data": null,
+    "_lightProbeSphereVolume": 1
+  }
+]
\ No newline at end of file
diff --git a/list-3x/assets/home/grid.scene.meta b/list-3x/assets/home/grid.scene.meta
new file mode 100644
index 0000000..8f30c7b
--- /dev/null
+++ b/list-3x/assets/home/grid.scene.meta
@@ -0,0 +1 @@
+{"ver":"1.1.45","importer":"scene","imported":true,"uuid":"85f5e60f-5f3d-42a9-871d-7e695a424d93","files":[".json"],"subMetas":{},"userData":{}}
diff --git a/list-3x/assets/home/grid.ts b/list-3x/assets/home/grid.ts
new file mode 100644
index 0000000..91be169
--- /dev/null
+++ b/list-3x/assets/home/grid.ts
@@ -0,0 +1,30 @@
+import { _decorator, Component, Label, math, Node } from 'cc';
+import { YXCollectionView } from '../lib/yx-collection-view';
+import { GridLayout } from '../lib/grid-layout';
+const { ccclass, property } = _decorator;
+
+@ccclass('grid')
+export class grid extends Component {
+    protected start(): void {
+        const listComp = this.node.getChildByName('list').getComponent(YXCollectionView)
+
+        listComp.numberOfItems = () => {
+            return 10000
+        }
+        listComp.cellForItemAt = (indexPath, collectionView) => {
+            const cell = collectionView.dequeueReusableCell(`cell`)
+            cell.getChildByName('label').getComponent(Label).string = `${indexPath}`
+            return cell
+        }
+
+        let layout = new GridLayout()
+        layout.horizontalSpacing = 20
+        layout.verticalSpacing = 20
+        layout.itemSize = new math.Size(150, 180)
+        listComp.layout = layout
+
+        listComp.reloadData()
+    }
+}
+
+
diff --git a/list-3x/assets/home/grid.ts.meta b/list-3x/assets/home/grid.ts.meta
new file mode 100644
index 0000000..7d02189
--- /dev/null
+++ b/list-3x/assets/home/grid.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "602ed99a-b16c-4731-8fb4-5ab51522172f",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/list-3x/assets/home/home.scene b/list-3x/assets/home/home.scene
index a725ac4..cb3338b 100644
--- a/list-3x/assets/home/home.scene
+++ b/list-3x/assets/home/home.scene
@@ -23,7 +23,7 @@
     "_active": true,
     "_components": [],
     "_prefab": {
-      "__id__": 23
+      "__id__": 13
     },
     "_lpos": {
       "__type__": "cc.Vec3",
@@ -54,7 +54,7 @@
     },
     "autoReleaseAssets": false,
     "_globals": {
-      "__id__": 24
+      "__id__": 14
     },
     "_id": "5d2f3c26-c7d2-48bd-bd13-ca5aa20a93c4"
   },
@@ -72,34 +72,28 @@
       },
       {
         "__id__": 5
-      },
-      {
-        "__id__": 9
-      },
-      {
-        "__id__": 14
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 19
+        "__id__": 9
       },
       {
-        "__id__": 20
+        "__id__": 10
       },
       {
-        "__id__": 21
+        "__id__": 11
       },
       {
-        "__id__": 22
+        "__id__": 12
       }
     ],
     "_prefab": null,
     "_lpos": {
       "__type__": "cc.Vec3",
-      "x": 640,
-      "y": 360.00000000000006,
+      "x": 360,
+      "y": 640,
       "z": 0
     },
     "_lrot": {
@@ -184,7 +178,7 @@
     "_priority": 0,
     "_fov": 45,
     "_fovAxis": 0,
-    "_orthoHeight": 415.3929539295393,
+    "_orthoHeight": 640,
     "_near": 0,
     "_far": 1000,
     "_color": {
@@ -218,7 +212,7 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "list1",
+    "_name": "list",
     "_objFlags": 0,
     "__editorExtras__": {},
     "_parent": {
@@ -237,7 +231,7 @@
     "_prefab": null,
     "_lpos": {
       "__type__": "cc.Vec3",
-      "x": -420,
+      "x": 0,
       "y": 0,
       "z": 0
     },
@@ -276,8 +270,8 @@
     "__prefab": null,
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 400,
-      "height": 700
+      "width": 720,
+      "height": 1280
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -321,242 +315,6 @@
     "identifier": "cell",
     "comp": ""
   },
-  {
-    "__type__": "cc.Node",
-    "_name": "list2",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "_parent": {
-      "__id__": 2
-    },
-    "_children": [],
-    "_active": true,
-    "_components": [
-      {
-        "__id__": 10
-      },
-      {
-        "__id__": 11
-      }
-    ],
-    "_prefab": null,
-    "_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": "15UUoyfNhFtISYnWUZ/NMT"
-  },
-  {
-    "__type__": "cc.UITransform",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 9
-    },
-    "_enabled": true,
-    "__prefab": null,
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 400,
-      "height": 700
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 0.5,
-      "y": 0.5
-    },
-    "_id": "61HeNMUnxBJ4RjTTIkj7jX"
-  },
-  {
-    "__type__": "f94cbxum3xAsomhVNW1piY0",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 9
-    },
-    "_enabled": true,
-    "__prefab": null,
-    "mask": true,
-    "scrollEnabled": true,
-    "wheelScrollEnabled": true,
-    "scrollDirection": 1,
-    "mode": 0,
-    "preloadNodesLimitPerFrame": 2,
-    "frameInterval": 1,
-    "recycleInterval": 1,
-    "registerCellForEditor": [
-      {
-        "__id__": 12
-      }
-    ],
-    "registerSupplementaryForEditor": [
-      {
-        "__id__": 13
-      }
-    ],
-    "_id": "557IDOUVFMgaXUVLj9KNOh"
-  },
-  {
-    "__type__": "_yx_editor_register_element_info",
-    "prefab": {
-      "__uuid__": "c8b689a4-ae47-4041-8c9c-7298939e76be",
-      "__expectedType__": "cc.Prefab"
-    },
-    "identifier": "cell",
-    "comp": ""
-  },
-  {
-    "__type__": "_yx_editor_register_element_info",
-    "prefab": {
-      "__uuid__": "c8b689a4-ae47-4041-8c9c-7298939e76be",
-      "__expectedType__": "cc.Prefab"
-    },
-    "identifier": "supplementary",
-    "comp": ""
-  },
-  {
-    "__type__": "cc.Node",
-    "_name": "list3",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "_parent": {
-      "__id__": 2
-    },
-    "_children": [],
-    "_active": true,
-    "_components": [
-      {
-        "__id__": 15
-      },
-      {
-        "__id__": 16
-      }
-    ],
-    "_prefab": null,
-    "_lpos": {
-      "__type__": "cc.Vec3",
-      "x": 420,
-      "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": "fdY0keATpIKb8Mxuy2Wwhd"
-  },
-  {
-    "__type__": "cc.UITransform",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 14
-    },
-    "_enabled": true,
-    "__prefab": null,
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 400,
-      "height": 700
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 0.5,
-      "y": 0.5
-    },
-    "_id": "6agiejTfZKQIWskmHSuyHv"
-  },
-  {
-    "__type__": "f94cbxum3xAsomhVNW1piY0",
-    "_name": "",
-    "_objFlags": 0,
-    "__editorExtras__": {},
-    "node": {
-      "__id__": 14
-    },
-    "_enabled": true,
-    "__prefab": null,
-    "mask": true,
-    "scrollEnabled": true,
-    "wheelScrollEnabled": true,
-    "scrollDirection": 1,
-    "mode": 0,
-    "preloadNodesLimitPerFrame": 2,
-    "frameInterval": 1,
-    "recycleInterval": 1,
-    "registerCellForEditor": [
-      {
-        "__id__": 17
-      }
-    ],
-    "registerSupplementaryForEditor": [
-      {
-        "__id__": 18
-      }
-    ],
-    "_id": "e75snCyRxN9KrcOvFeGEnP"
-  },
-  {
-    "__type__": "_yx_editor_register_element_info",
-    "prefab": {
-      "__uuid__": "c8b689a4-ae47-4041-8c9c-7298939e76be",
-      "__expectedType__": "cc.Prefab"
-    },
-    "identifier": "cell",
-    "comp": ""
-  },
-  {
-    "__type__": "_yx_editor_register_element_info",
-    "prefab": {
-      "__uuid__": "c8b689a4-ae47-4041-8c9c-7298939e76be",
-      "__expectedType__": "cc.Prefab"
-    },
-    "identifier": "supplementary",
-    "comp": ""
-  },
   {
     "__type__": "cc.UITransform",
     "_name": "",
@@ -569,8 +327,8 @@
     "__prefab": null,
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 1280,
-      "height": 720
+      "width": 720,
+      "height": 1280
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -648,25 +406,25 @@
   {
     "__type__": "cc.SceneGlobals",
     "ambient": {
-      "__id__": 25
+      "__id__": 15
     },
     "shadows": {
-      "__id__": 26
+      "__id__": 16
     },
     "_skybox": {
-      "__id__": 27
+      "__id__": 17
     },
     "fog": {
-      "__id__": 28
+      "__id__": 18
     },
     "octree": {
-      "__id__": 29
+      "__id__": 19
     },
     "skin": {
-      "__id__": 30
+      "__id__": 20
     },
     "lightProbeInfo": {
-      "__id__": 31
+      "__id__": 21
     },
     "bakedWithStationaryMainLight": false,
     "bakedWithHighpLightmap": false
diff --git a/list-3x/assets/home/home.ts b/list-3x/assets/home/home.ts
index ed33bb1..fad926d 100644
--- a/list-3x/assets/home/home.ts
+++ b/list-3x/assets/home/home.ts
@@ -6,17 +6,12 @@ const { ccclass, property } = _decorator;
 
 @ccclass('home')
 export class home extends Component {
-
     protected start(): void {
-        this.setup_list1()
-        this.setup_list2()
-        this.setup_list3()
-    }
+        const listComp = this.node.getChildByName('list').getComponent(YXCollectionView)
 
-    setup_list1() {
-        const listComp = this.node.getChildByName('list1').getComponent(YXCollectionView)
-
-        listComp.numberOfItems = () => 10000
+        listComp.numberOfItems = () => {
+            return 10000
+        }
         listComp.cellForItemAt = (indexPath, collectionView) => {
             const cell = collectionView.dequeueReusableCell(`cell`)
             cell.getChildByName('label').getComponent(Label).string = `${indexPath}`
@@ -30,89 +25,5 @@ export class home extends Component {
 
         listComp.reloadData()
     }
-
-    setup_list2() {
-        const listComp = this.node.getChildByName('list2').getComponent(YXCollectionView)
-
-        listComp.numberOfSections = () => 100
-        listComp.supplementaryForItemAt = (indexPath, collectionView, kinds) => {
-            if (kinds === YXTableLayout.SupplementaryKinds.HEADER) {
-                const supplementary = collectionView.dequeueReusableSupplementary('supplementary')
-                supplementary.getChildByName('label').getComponent(Label).string = `header  ${indexPath}`
-                const shape = supplementary.getChildByName('shape')
-                shape.getComponent(Sprite).color = new math.Color(100, 100, 150)
-                return supplementary
-            }
-            if (kinds === YXTableLayout.SupplementaryKinds.FOOTER) {
-                const supplementary = collectionView.dequeueReusableSupplementary('supplementary')
-                supplementary.getChildByName('label').getComponent(Label).string = `footer  ${indexPath}`
-                const shape = supplementary.getChildByName('shape')
-                shape.getComponent(Sprite).color = new math.Color(150, 100, 100)
-                return supplementary
-            }
-            return null
-        }
-
-        listComp.numberOfItems = () => 20
-        listComp.cellForItemAt = (indexPath, collectionView) => {
-            const cell = collectionView.dequeueReusableCell(`cell`)
-            cell.getChildByName('label').getComponent(Label).string = `${indexPath}`
-            return cell
-        }
-
-        let layout = new YXTableLayout()
-        layout.spacing = 20
-        layout.top = 20
-        layout.bottom = 20
-        layout.rowHeight = 100
-        layout.sectionHeaderHeight = 120
-        layout.sectionFooterHeight = 120
-        listComp.layout = layout
-
-        listComp.reloadData()
-    }
-
-    setup_list3() {
-        const listComp = this.node.getChildByName('list3').getComponent(YXCollectionView)
-
-        listComp.numberOfSections = () => 100
-        listComp.supplementaryForItemAt = (indexPath, collectionView, kinds) => {
-            if (kinds === YXTableLayout.SupplementaryKinds.HEADER) {
-                const supplementary = collectionView.dequeueReusableSupplementary('supplementary')
-                supplementary.getChildByName('label').getComponent(Label).string = `header  ${indexPath}`
-                const shape = supplementary.getChildByName('shape')
-                shape.getComponent(Sprite).color = new math.Color(100, 100, 150)
-                return supplementary
-            }
-            if (kinds === YXTableLayout.SupplementaryKinds.FOOTER) {
-                const supplementary = collectionView.dequeueReusableSupplementary('supplementary')
-                supplementary.getChildByName('label').getComponent(Label).string = `footer  ${indexPath}`
-                const shape = supplementary.getChildByName('shape')
-                shape.getComponent(Sprite).color = new math.Color(150, 100, 100)
-                return supplementary
-            }
-            return null
-        }
-
-        listComp.numberOfItems = () => 20
-        listComp.cellForItemAt = (indexPath, collectionView) => {
-            const cell = collectionView.dequeueReusableCell(`cell`)
-            cell.getChildByName('label').getComponent(Label).string = `${indexPath}`
-            return cell
-        }
-
-        let layout = new YXTableLayout()
-        layout.spacing = 20
-        layout.top = 20
-        layout.bottom = 20
-        layout.rowHeight = 100
-        layout.sectionHeaderHeight = 120
-        layout.sectionFooterHeight = 120
-        layout.sectionHeadersPinToVisibleBounds = true
-        layout.sectionFootersPinToVisibleBounds = true
-        listComp.layout = layout
-
-        listComp.reloadData()
-    }
 }
 
diff --git a/list-3x/assets/home/page_view.scene b/list-3x/assets/home/page_view.scene
new file mode 100644
index 0000000..c18fad5
--- /dev/null
+++ b/list-3x/assets/home/page_view.scene
@@ -0,0 +1,575 @@
+[
+  {
+    "__type__": "cc.SceneAsset",
+    "_name": "page_view",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_native": "",
+    "scene": {
+      "__id__": 1
+    }
+  },
+  {
+    "__type__": "cc.Scene",
+    "_name": "page_view",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      }
+    ],
+    "_active": true,
+    "_components": [],
+    "_prefab": {
+      "__id__": 13
+    },
+    "_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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "autoReleaseAssets": false,
+    "_globals": {
+      "__id__": 14
+    },
+    "_id": "aab8c0ca-1eba-412f-a30c-b2d7e17dcb86"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Canvas",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 5
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 9
+      },
+      {
+        "__id__": 10
+      },
+      {
+        "__id__": 11
+      },
+      {
+        "__id__": 12
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 360,
+      "y": 640,
+      "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": "beI88Z2HpFELqR4T5EMHpg"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Camera",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 1000
+    },
+    "_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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "ebFwiq8gBFaYpqYbdoDODe"
+  },
+  {
+    "__type__": "cc.Camera",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 3
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_projection": 0,
+    "_priority": 0,
+    "_fov": 45,
+    "_fovAxis": 0,
+    "_orthoHeight": 640,
+    "_near": 0,
+    "_far": 1000,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_depth": 1,
+    "_stencil": 0,
+    "_clearFlags": 7,
+    "_rect": {
+      "__type__": "cc.Rect",
+      "x": 0,
+      "y": 0,
+      "width": 1,
+      "height": 1
+    },
+    "_aperture": 19,
+    "_shutter": 7,
+    "_iso": 0,
+    "_screenScale": 1,
+    "_visibility": 1108344832,
+    "_targetTexture": null,
+    "_postProcess": null,
+    "_usePostProcess": false,
+    "_cameraType": -1,
+    "_trackingType": 0,
+    "_id": "63WIch3o5BEYRlXzTT0oWc"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "list",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 6
+      },
+      {
+        "__id__": 7
+      }
+    ],
+    "_prefab": null,
+    "_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": "d1/dCc9yNJ44lI4TRGfy4z"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 720,
+      "height": 1280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "315xpp6rxGVIpwfAByHAu2"
+  },
+  {
+    "__type__": "f94cbxum3xAsomhVNW1piY0",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "mask": true,
+    "scrollEnabled": true,
+    "wheelScrollEnabled": false,
+    "scrollDirection": 1,
+    "mode": 0,
+    "preloadNodesLimitPerFrame": 2,
+    "frameInterval": 1,
+    "recycleInterval": 1,
+    "autoReloadOnSizeChange": false,
+    "registerCellForEditor": [
+      {
+        "__id__": 8
+      }
+    ],
+    "registerSupplementaryForEditor": [],
+    "_id": "540sP7RuVMr66Fyji3wiJs"
+  },
+  {
+    "__type__": "_yx_editor_register_element_info",
+    "prefab": {
+      "__uuid__": "c8b689a4-ae47-4041-8c9c-7298939e76be",
+      "__expectedType__": "cc.Prefab"
+    },
+    "identifier": "cell",
+    "comp": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 720,
+      "height": 1280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "d6rUX5yfhMlKoWX2bSbawx"
+  },
+  {
+    "__type__": "cc.Canvas",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_cameraComponent": {
+      "__id__": 4
+    },
+    "_alignCanvasWithScreen": true,
+    "_id": "12O/ljcVlEqLmVm3U2gEOQ"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 5.684341886080802e-14,
+    "_bottom": 5.684341886080802e-14,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": "c5V1EV8IpMtrIvY1OE9t2u"
+  },
+  {
+    "__type__": "719d9iNbZlKorsUoOM5YPll",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_id": "e1zHsjFPZAZ7M4IJ47yFyu"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": null,
+    "asset": null,
+    "fileId": "5d2f3c26-c7d2-48bd-bd13-ca5aa20a93c4",
+    "instance": null,
+    "targetOverrides": null
+  },
+  {
+    "__type__": "cc.SceneGlobals",
+    "ambient": {
+      "__id__": 15
+    },
+    "shadows": {
+      "__id__": 16
+    },
+    "_skybox": {
+      "__id__": 17
+    },
+    "fog": {
+      "__id__": 18
+    },
+    "octree": {
+      "__id__": 19
+    },
+    "skin": {
+      "__id__": 20
+    },
+    "lightProbeInfo": {
+      "__id__": 21
+    },
+    "bakedWithStationaryMainLight": false,
+    "bakedWithHighpLightmap": false
+  },
+  {
+    "__type__": "cc.AmbientInfo",
+    "_skyColorHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyColor": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyIllumHDR": 20000,
+    "_skyIllum": 20000,
+    "_groundAlbedoHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_groundAlbedo": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_skyColorLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.5,
+      "z": 0.8,
+      "w": 1
+    },
+    "_skyIllumLDR": 20000,
+    "_groundAlbedoLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.2,
+      "z": 0.2,
+      "w": 1
+    }
+  },
+  {
+    "__type__": "cc.ShadowsInfo",
+    "_enabled": false,
+    "_type": 0,
+    "_normal": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 1,
+      "z": 0
+    },
+    "_distance": 0,
+    "_shadowColor": {
+      "__type__": "cc.Color",
+      "r": 76,
+      "g": 76,
+      "b": 76,
+      "a": 255
+    },
+    "_maxReceived": 4,
+    "_size": {
+      "__type__": "cc.Vec2",
+      "x": 512,
+      "y": 512
+    }
+  },
+  {
+    "__type__": "cc.SkyboxInfo",
+    "_envLightingType": 0,
+    "_envmapHDR": null,
+    "_envmap": null,
+    "_envmapLDR": null,
+    "_diffuseMapHDR": null,
+    "_diffuseMapLDR": null,
+    "_enabled": false,
+    "_useHDR": true,
+    "_editableMaterial": null,
+    "_reflectionHDR": null,
+    "_reflectionLDR": null,
+    "_rotationAngle": 0
+  },
+  {
+    "__type__": "cc.FogInfo",
+    "_type": 0,
+    "_fogColor": {
+      "__type__": "cc.Color",
+      "r": 200,
+      "g": 200,
+      "b": 200,
+      "a": 255
+    },
+    "_enabled": false,
+    "_fogDensity": 0.3,
+    "_fogStart": 0.5,
+    "_fogEnd": 300,
+    "_fogAtten": 5,
+    "_fogTop": 1.5,
+    "_fogRange": 1.2,
+    "_accurate": false
+  },
+  {
+    "__type__": "cc.OctreeInfo",
+    "_enabled": false,
+    "_minPos": {
+      "__type__": "cc.Vec3",
+      "x": -1024,
+      "y": -1024,
+      "z": -1024
+    },
+    "_maxPos": {
+      "__type__": "cc.Vec3",
+      "x": 1024,
+      "y": 1024,
+      "z": 1024
+    },
+    "_depth": 8
+  },
+  {
+    "__type__": "cc.SkinInfo",
+    "_enabled": false,
+    "_blurRadius": 0.01,
+    "_sssIntensity": 3
+  },
+  {
+    "__type__": "cc.LightProbeInfo",
+    "_giScale": 1,
+    "_giSamples": 1024,
+    "_bounces": 2,
+    "_reduceRinging": 0,
+    "_showProbe": true,
+    "_showWireframe": true,
+    "_showConvex": false,
+    "_data": null,
+    "_lightProbeSphereVolume": 1
+  }
+]
\ No newline at end of file
diff --git a/list-3x/assets/home/page_view.scene.meta b/list-3x/assets/home/page_view.scene.meta
new file mode 100644
index 0000000..576e239
--- /dev/null
+++ b/list-3x/assets/home/page_view.scene.meta
@@ -0,0 +1 @@
+{"ver":"1.1.45","importer":"scene","imported":true,"uuid":"aab8c0ca-1eba-412f-a30c-b2d7e17dcb86","files":[".json"],"subMetas":{},"userData":{}}
diff --git a/list-3x/assets/home/page_view.ts b/list-3x/assets/home/page_view.ts
new file mode 100644
index 0000000..6e26562
--- /dev/null
+++ b/list-3x/assets/home/page_view.ts
@@ -0,0 +1,30 @@
+import { _decorator, Component, Label } from 'cc';
+import { YXCollectionView } from '../lib/yx-collection-view';
+import { PageLayout } from '../lib/page-layout';
+const { ccclass, property } = _decorator;
+
+@ccclass('page_view')
+export class page_view extends Component {
+    protected start(): void {
+        const listComp = this.node.getChildByName('list').getComponent(YXCollectionView)
+
+        listComp.ignoreScrollEndedDuringAutoScroll = true
+        listComp.numberOfItems = () => {
+            return 3
+        }
+        listComp.cellForItemAt = (indexPath, collectionView) => {
+            let index = indexPath.row % 3
+            const cell = collectionView.dequeueReusableCell(`cell`)
+            cell.getChildByName('label').getComponent(Label).string = `左右滑动切换页面` + `\n` + `当前页面: ` + `${index}`
+            return cell
+        }
+
+        let layout = new PageLayout()
+        // 这个属性用来控制是否循环滚动  
+        layout.loop = true
+        listComp.layout = layout
+
+        listComp.reloadData()
+    }
+}
+
diff --git a/list-3x/assets/home/page_view.ts.meta b/list-3x/assets/home/page_view.ts.meta
new file mode 100644
index 0000000..fbc0dde
--- /dev/null
+++ b/list-3x/assets/home/page_view.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "719d988d-6d99-4aa2-bb14-a0e33960f965",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/list-3x/assets/home/table.scene b/list-3x/assets/home/table.scene
new file mode 100644
index 0000000..189974e
--- /dev/null
+++ b/list-3x/assets/home/table.scene
@@ -0,0 +1,574 @@
+[
+  {
+    "__type__": "cc.SceneAsset",
+    "_name": "table",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_native": "",
+    "scene": {
+      "__id__": 1
+    }
+  },
+  {
+    "__type__": "cc.Scene",
+    "_name": "table",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      }
+    ],
+    "_active": true,
+    "_components": [],
+    "_prefab": {
+      "__id__": 13
+    },
+    "_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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "autoReleaseAssets": false,
+    "_globals": {
+      "__id__": 14
+    },
+    "_id": "61cb8dbb-56d2-403e-a035-5385b6ddaf2b"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Canvas",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 5
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 9
+      },
+      {
+        "__id__": 10
+      },
+      {
+        "__id__": 11
+      },
+      {
+        "__id__": 12
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 360,
+      "y": 640,
+      "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": "beI88Z2HpFELqR4T5EMHpg"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Camera",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 1000
+    },
+    "_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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "ebFwiq8gBFaYpqYbdoDODe"
+  },
+  {
+    "__type__": "cc.Camera",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 3
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_projection": 0,
+    "_priority": 0,
+    "_fov": 45,
+    "_fovAxis": 0,
+    "_orthoHeight": 640,
+    "_near": 0,
+    "_far": 1000,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_depth": 1,
+    "_stencil": 0,
+    "_clearFlags": 7,
+    "_rect": {
+      "__type__": "cc.Rect",
+      "x": 0,
+      "y": 0,
+      "width": 1,
+      "height": 1
+    },
+    "_aperture": 19,
+    "_shutter": 7,
+    "_iso": 0,
+    "_screenScale": 1,
+    "_visibility": 1108344832,
+    "_targetTexture": null,
+    "_postProcess": null,
+    "_usePostProcess": false,
+    "_cameraType": -1,
+    "_trackingType": 0,
+    "_id": "63WIch3o5BEYRlXzTT0oWc"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "list",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 6
+      },
+      {
+        "__id__": 7
+      }
+    ],
+    "_prefab": null,
+    "_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": "d1/dCc9yNJ44lI4TRGfy4z"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 720,
+      "height": 1280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "315xpp6rxGVIpwfAByHAu2"
+  },
+  {
+    "__type__": "f94cbxum3xAsomhVNW1piY0",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "mask": true,
+    "scrollEnabled": true,
+    "wheelScrollEnabled": true,
+    "scrollDirection": 1,
+    "mode": 0,
+    "preloadNodesLimitPerFrame": 2,
+    "frameInterval": 1,
+    "recycleInterval": 1,
+    "registerCellForEditor": [
+      {
+        "__id__": 8
+      }
+    ],
+    "registerSupplementaryForEditor": [],
+    "_id": "540sP7RuVMr66Fyji3wiJs"
+  },
+  {
+    "__type__": "_yx_editor_register_element_info",
+    "prefab": {
+      "__uuid__": "c8b689a4-ae47-4041-8c9c-7298939e76be",
+      "__expectedType__": "cc.Prefab"
+    },
+    "identifier": "cell",
+    "comp": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 720,
+      "height": 1280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "d6rUX5yfhMlKoWX2bSbawx"
+  },
+  {
+    "__type__": "cc.Canvas",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_cameraComponent": {
+      "__id__": 4
+    },
+    "_alignCanvasWithScreen": true,
+    "_id": "12O/ljcVlEqLmVm3U2gEOQ"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 5.684341886080802e-14,
+    "_bottom": 5.684341886080802e-14,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": "c5V1EV8IpMtrIvY1OE9t2u"
+  },
+  {
+    "__type__": "5cd4ePkznBAh4rxIlprB3Bf",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_id": "8e9RdBC9VF6ZvCDMCSULSb"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": null,
+    "asset": null,
+    "fileId": "5d2f3c26-c7d2-48bd-bd13-ca5aa20a93c4",
+    "instance": null,
+    "targetOverrides": null
+  },
+  {
+    "__type__": "cc.SceneGlobals",
+    "ambient": {
+      "__id__": 15
+    },
+    "shadows": {
+      "__id__": 16
+    },
+    "_skybox": {
+      "__id__": 17
+    },
+    "fog": {
+      "__id__": 18
+    },
+    "octree": {
+      "__id__": 19
+    },
+    "skin": {
+      "__id__": 20
+    },
+    "lightProbeInfo": {
+      "__id__": 21
+    },
+    "bakedWithStationaryMainLight": false,
+    "bakedWithHighpLightmap": false
+  },
+  {
+    "__type__": "cc.AmbientInfo",
+    "_skyColorHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyColor": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyIllumHDR": 20000,
+    "_skyIllum": 20000,
+    "_groundAlbedoHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_groundAlbedo": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_skyColorLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.5,
+      "z": 0.8,
+      "w": 1
+    },
+    "_skyIllumLDR": 20000,
+    "_groundAlbedoLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.2,
+      "z": 0.2,
+      "w": 1
+    }
+  },
+  {
+    "__type__": "cc.ShadowsInfo",
+    "_enabled": false,
+    "_type": 0,
+    "_normal": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 1,
+      "z": 0
+    },
+    "_distance": 0,
+    "_shadowColor": {
+      "__type__": "cc.Color",
+      "r": 76,
+      "g": 76,
+      "b": 76,
+      "a": 255
+    },
+    "_maxReceived": 4,
+    "_size": {
+      "__type__": "cc.Vec2",
+      "x": 512,
+      "y": 512
+    }
+  },
+  {
+    "__type__": "cc.SkyboxInfo",
+    "_envLightingType": 0,
+    "_envmapHDR": null,
+    "_envmap": null,
+    "_envmapLDR": null,
+    "_diffuseMapHDR": null,
+    "_diffuseMapLDR": null,
+    "_enabled": false,
+    "_useHDR": true,
+    "_editableMaterial": null,
+    "_reflectionHDR": null,
+    "_reflectionLDR": null,
+    "_rotationAngle": 0
+  },
+  {
+    "__type__": "cc.FogInfo",
+    "_type": 0,
+    "_fogColor": {
+      "__type__": "cc.Color",
+      "r": 200,
+      "g": 200,
+      "b": 200,
+      "a": 255
+    },
+    "_enabled": false,
+    "_fogDensity": 0.3,
+    "_fogStart": 0.5,
+    "_fogEnd": 300,
+    "_fogAtten": 5,
+    "_fogTop": 1.5,
+    "_fogRange": 1.2,
+    "_accurate": false
+  },
+  {
+    "__type__": "cc.OctreeInfo",
+    "_enabled": false,
+    "_minPos": {
+      "__type__": "cc.Vec3",
+      "x": -1024,
+      "y": -1024,
+      "z": -1024
+    },
+    "_maxPos": {
+      "__type__": "cc.Vec3",
+      "x": 1024,
+      "y": 1024,
+      "z": 1024
+    },
+    "_depth": 8
+  },
+  {
+    "__type__": "cc.SkinInfo",
+    "_enabled": false,
+    "_blurRadius": 0.01,
+    "_sssIntensity": 3
+  },
+  {
+    "__type__": "cc.LightProbeInfo",
+    "_giScale": 1,
+    "_giSamples": 1024,
+    "_bounces": 2,
+    "_reduceRinging": 0,
+    "_showProbe": true,
+    "_showWireframe": true,
+    "_showConvex": false,
+    "_data": null,
+    "_lightProbeSphereVolume": 1
+  }
+]
\ No newline at end of file
diff --git a/list-3x/assets/home/table.scene.meta b/list-3x/assets/home/table.scene.meta
new file mode 100644
index 0000000..9b78533
--- /dev/null
+++ b/list-3x/assets/home/table.scene.meta
@@ -0,0 +1 @@
+{"ver":"1.1.45","importer":"scene","imported":true,"uuid":"61cb8dbb-56d2-403e-a035-5385b6ddaf2b","files":[".json"],"subMetas":{},"userData":{}}
diff --git a/list-3x/assets/home/table.ts b/list-3x/assets/home/table.ts
new file mode 100644
index 0000000..4466122
--- /dev/null
+++ b/list-3x/assets/home/table.ts
@@ -0,0 +1,29 @@
+import { _decorator, Component, Label, Node } from 'cc';
+import { YXCollectionView } from '../lib/yx-collection-view';
+import { YXTableLayout } from '../lib/yx-table-layout';
+const { ccclass, property } = _decorator;
+
+@ccclass('table')
+export class table extends Component {
+    protected start(): void {
+        const listComp = this.node.getChildByName('list').getComponent(YXCollectionView)
+
+        listComp.numberOfItems = () => {
+            return 10000
+        }
+        listComp.cellForItemAt = (indexPath, collectionView) => {
+            const cell = collectionView.dequeueReusableCell(`cell`)
+            cell.getChildByName('label').getComponent(Label).string = `${indexPath}`
+            return cell
+        }
+
+        let layout = new YXTableLayout()
+        layout.spacing = 10
+        layout.rowHeight = 120
+        listComp.layout = layout
+
+        listComp.reloadData()
+    }
+}
+
+
diff --git a/list-3x/assets/home/table.ts.meta b/list-3x/assets/home/table.ts.meta
new file mode 100644
index 0000000..367e170
--- /dev/null
+++ b/list-3x/assets/home/table.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "5cd4e3e4-ce70-4087-8af1-225a6b07705f",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/list-3x/assets/home/table_anyheight.scene b/list-3x/assets/home/table_anyheight.scene
new file mode 100644
index 0000000..0147764
--- /dev/null
+++ b/list-3x/assets/home/table_anyheight.scene
@@ -0,0 +1,574 @@
+[
+  {
+    "__type__": "cc.SceneAsset",
+    "_name": "table_anyheight",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_native": "",
+    "scene": {
+      "__id__": 1
+    }
+  },
+  {
+    "__type__": "cc.Scene",
+    "_name": "table_anyheight",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      }
+    ],
+    "_active": true,
+    "_components": [],
+    "_prefab": {
+      "__id__": 13
+    },
+    "_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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "autoReleaseAssets": false,
+    "_globals": {
+      "__id__": 14
+    },
+    "_id": "2a449616-89aa-4f43-b171-25d08562f375"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Canvas",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 5
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 9
+      },
+      {
+        "__id__": 10
+      },
+      {
+        "__id__": 11
+      },
+      {
+        "__id__": 12
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 360,
+      "y": 640,
+      "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": "beI88Z2HpFELqR4T5EMHpg"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Camera",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 1000
+    },
+    "_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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "ebFwiq8gBFaYpqYbdoDODe"
+  },
+  {
+    "__type__": "cc.Camera",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 3
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_projection": 0,
+    "_priority": 0,
+    "_fov": 45,
+    "_fovAxis": 0,
+    "_orthoHeight": 640,
+    "_near": 0,
+    "_far": 1000,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_depth": 1,
+    "_stencil": 0,
+    "_clearFlags": 7,
+    "_rect": {
+      "__type__": "cc.Rect",
+      "x": 0,
+      "y": 0,
+      "width": 1,
+      "height": 1
+    },
+    "_aperture": 19,
+    "_shutter": 7,
+    "_iso": 0,
+    "_screenScale": 1,
+    "_visibility": 1108344832,
+    "_targetTexture": null,
+    "_postProcess": null,
+    "_usePostProcess": false,
+    "_cameraType": -1,
+    "_trackingType": 0,
+    "_id": "63WIch3o5BEYRlXzTT0oWc"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "list",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 6
+      },
+      {
+        "__id__": 7
+      }
+    ],
+    "_prefab": null,
+    "_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": "d1/dCc9yNJ44lI4TRGfy4z"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 720,
+      "height": 1280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "315xpp6rxGVIpwfAByHAu2"
+  },
+  {
+    "__type__": "f94cbxum3xAsomhVNW1piY0",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "mask": true,
+    "scrollEnabled": true,
+    "wheelScrollEnabled": true,
+    "scrollDirection": 1,
+    "mode": 0,
+    "preloadNodesLimitPerFrame": 2,
+    "frameInterval": 1,
+    "recycleInterval": 1,
+    "registerCellForEditor": [
+      {
+        "__id__": 8
+      }
+    ],
+    "registerSupplementaryForEditor": [],
+    "_id": "540sP7RuVMr66Fyji3wiJs"
+  },
+  {
+    "__type__": "_yx_editor_register_element_info",
+    "prefab": {
+      "__uuid__": "c8b689a4-ae47-4041-8c9c-7298939e76be",
+      "__expectedType__": "cc.Prefab"
+    },
+    "identifier": "cell",
+    "comp": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 720,
+      "height": 1280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "d6rUX5yfhMlKoWX2bSbawx"
+  },
+  {
+    "__type__": "cc.Canvas",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_cameraComponent": {
+      "__id__": 4
+    },
+    "_alignCanvasWithScreen": true,
+    "_id": "12O/ljcVlEqLmVm3U2gEOQ"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 5.684341886080802e-14,
+    "_bottom": 5.684341886080802e-14,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": "c5V1EV8IpMtrIvY1OE9t2u"
+  },
+  {
+    "__type__": "5d98avssBZEDJz/71riEpI0",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_id": "92Ya0n3HhBD5ktM9+wUhgB"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": null,
+    "asset": null,
+    "fileId": "5d2f3c26-c7d2-48bd-bd13-ca5aa20a93c4",
+    "instance": null,
+    "targetOverrides": null
+  },
+  {
+    "__type__": "cc.SceneGlobals",
+    "ambient": {
+      "__id__": 15
+    },
+    "shadows": {
+      "__id__": 16
+    },
+    "_skybox": {
+      "__id__": 17
+    },
+    "fog": {
+      "__id__": 18
+    },
+    "octree": {
+      "__id__": 19
+    },
+    "skin": {
+      "__id__": 20
+    },
+    "lightProbeInfo": {
+      "__id__": 21
+    },
+    "bakedWithStationaryMainLight": false,
+    "bakedWithHighpLightmap": false
+  },
+  {
+    "__type__": "cc.AmbientInfo",
+    "_skyColorHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyColor": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyIllumHDR": 20000,
+    "_skyIllum": 20000,
+    "_groundAlbedoHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_groundAlbedo": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_skyColorLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.5,
+      "z": 0.8,
+      "w": 1
+    },
+    "_skyIllumLDR": 20000,
+    "_groundAlbedoLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.2,
+      "z": 0.2,
+      "w": 1
+    }
+  },
+  {
+    "__type__": "cc.ShadowsInfo",
+    "_enabled": false,
+    "_type": 0,
+    "_normal": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 1,
+      "z": 0
+    },
+    "_distance": 0,
+    "_shadowColor": {
+      "__type__": "cc.Color",
+      "r": 76,
+      "g": 76,
+      "b": 76,
+      "a": 255
+    },
+    "_maxReceived": 4,
+    "_size": {
+      "__type__": "cc.Vec2",
+      "x": 512,
+      "y": 512
+    }
+  },
+  {
+    "__type__": "cc.SkyboxInfo",
+    "_envLightingType": 0,
+    "_envmapHDR": null,
+    "_envmap": null,
+    "_envmapLDR": null,
+    "_diffuseMapHDR": null,
+    "_diffuseMapLDR": null,
+    "_enabled": false,
+    "_useHDR": true,
+    "_editableMaterial": null,
+    "_reflectionHDR": null,
+    "_reflectionLDR": null,
+    "_rotationAngle": 0
+  },
+  {
+    "__type__": "cc.FogInfo",
+    "_type": 0,
+    "_fogColor": {
+      "__type__": "cc.Color",
+      "r": 200,
+      "g": 200,
+      "b": 200,
+      "a": 255
+    },
+    "_enabled": false,
+    "_fogDensity": 0.3,
+    "_fogStart": 0.5,
+    "_fogEnd": 300,
+    "_fogAtten": 5,
+    "_fogTop": 1.5,
+    "_fogRange": 1.2,
+    "_accurate": false
+  },
+  {
+    "__type__": "cc.OctreeInfo",
+    "_enabled": false,
+    "_minPos": {
+      "__type__": "cc.Vec3",
+      "x": -1024,
+      "y": -1024,
+      "z": -1024
+    },
+    "_maxPos": {
+      "__type__": "cc.Vec3",
+      "x": 1024,
+      "y": 1024,
+      "z": 1024
+    },
+    "_depth": 8
+  },
+  {
+    "__type__": "cc.SkinInfo",
+    "_enabled": false,
+    "_blurRadius": 0.01,
+    "_sssIntensity": 3
+  },
+  {
+    "__type__": "cc.LightProbeInfo",
+    "_giScale": 1,
+    "_giSamples": 1024,
+    "_bounces": 2,
+    "_reduceRinging": 0,
+    "_showProbe": true,
+    "_showWireframe": true,
+    "_showConvex": false,
+    "_data": null,
+    "_lightProbeSphereVolume": 1
+  }
+]
\ No newline at end of file
diff --git a/list-3x/assets/home/table_anyheight.scene.meta b/list-3x/assets/home/table_anyheight.scene.meta
new file mode 100644
index 0000000..f6b32c7
--- /dev/null
+++ b/list-3x/assets/home/table_anyheight.scene.meta
@@ -0,0 +1 @@
+{"ver":"1.1.45","importer":"scene","imported":true,"uuid":"2a449616-89aa-4f43-b171-25d08562f375","files":[".json"],"subMetas":{},"userData":{}}
diff --git a/list-3x/assets/home/table_anyheight.ts b/list-3x/assets/home/table_anyheight.ts
new file mode 100644
index 0000000..6ce55c0
--- /dev/null
+++ b/list-3x/assets/home/table_anyheight.ts
@@ -0,0 +1,32 @@
+import { _decorator, Component, Label, Node } from 'cc';
+import { YXCollectionView } from '../lib/yx-collection-view';
+import { YXTableLayout } from '../lib/yx-table-layout';
+const { ccclass, property } = _decorator;
+
+@ccclass('table_anyheight')
+export class table_anyheight extends Component {
+    protected start(): void {
+        const listComp = this.node.getChildByName('list').getComponent(YXCollectionView)
+
+        listComp.numberOfItems = () => {
+            return 10000
+        }
+        listComp.cellForItemAt = (indexPath, collectionView) => {
+            const cell = collectionView.dequeueReusableCell(`cell`)
+            cell.getChildByName('label').getComponent(Label).string = `${indexPath}`
+            return cell
+        }
+
+        let layout = new YXTableLayout()
+        layout.spacing = 10
+        layout.rowHeight = (indexPath) => {
+            // 可以根据 `indexPath` 返回实际数据对应的 UI 高度
+            return (indexPath.row % 2 == 0) ? 120 : 200
+        }
+        listComp.layout = layout
+
+        listComp.reloadData()
+    }
+}
+
+
diff --git a/list-3x/assets/home/table_anyheight.ts.meta b/list-3x/assets/home/table_anyheight.ts.meta
new file mode 100644
index 0000000..dd89336
--- /dev/null
+++ b/list-3x/assets/home/table_anyheight.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "5d98abec-b016-440c-9cff-ef5ae2129234",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/list-3x/assets/home/table_in_page.scene b/list-3x/assets/home/table_in_page.scene
new file mode 100644
index 0000000..973a9f9
--- /dev/null
+++ b/list-3x/assets/home/table_in_page.scene
@@ -0,0 +1,575 @@
+[
+  {
+    "__type__": "cc.SceneAsset",
+    "_name": "table_in_page",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_native": "",
+    "scene": {
+      "__id__": 1
+    }
+  },
+  {
+    "__type__": "cc.Scene",
+    "_name": "table_in_page",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      }
+    ],
+    "_active": true,
+    "_components": [],
+    "_prefab": {
+      "__id__": 13
+    },
+    "_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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "autoReleaseAssets": false,
+    "_globals": {
+      "__id__": 14
+    },
+    "_id": "cbfd651a-8d93-4763-bec9-718b1b7cb8c2"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Canvas",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 5
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 9
+      },
+      {
+        "__id__": 10
+      },
+      {
+        "__id__": 11
+      },
+      {
+        "__id__": 12
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 360,
+      "y": 640,
+      "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": "beI88Z2HpFELqR4T5EMHpg"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Camera",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 1000
+    },
+    "_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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "ebFwiq8gBFaYpqYbdoDODe"
+  },
+  {
+    "__type__": "cc.Camera",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 3
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_projection": 0,
+    "_priority": 0,
+    "_fov": 45,
+    "_fovAxis": 0,
+    "_orthoHeight": 640,
+    "_near": 0,
+    "_far": 1000,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_depth": 1,
+    "_stencil": 0,
+    "_clearFlags": 7,
+    "_rect": {
+      "__type__": "cc.Rect",
+      "x": 0,
+      "y": 0,
+      "width": 1,
+      "height": 1
+    },
+    "_aperture": 19,
+    "_shutter": 7,
+    "_iso": 0,
+    "_screenScale": 1,
+    "_visibility": 1108344832,
+    "_targetTexture": null,
+    "_postProcess": null,
+    "_usePostProcess": false,
+    "_cameraType": -1,
+    "_trackingType": 0,
+    "_id": "63WIch3o5BEYRlXzTT0oWc"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "list",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 6
+      },
+      {
+        "__id__": 7
+      }
+    ],
+    "_prefab": null,
+    "_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": "d1/dCc9yNJ44lI4TRGfy4z"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 720,
+      "height": 1280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "315xpp6rxGVIpwfAByHAu2"
+  },
+  {
+    "__type__": "f94cbxum3xAsomhVNW1piY0",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "mask": true,
+    "scrollEnabled": true,
+    "wheelScrollEnabled": false,
+    "scrollDirection": 1,
+    "mode": 0,
+    "preloadNodesLimitPerFrame": 2,
+    "frameInterval": 1,
+    "recycleInterval": 1,
+    "autoReloadOnSizeChange": false,
+    "registerCellForEditor": [
+      {
+        "__id__": 8
+      }
+    ],
+    "registerSupplementaryForEditor": [],
+    "_id": "540sP7RuVMr66Fyji3wiJs"
+  },
+  {
+    "__type__": "_yx_editor_register_element_info",
+    "prefab": {
+      "__uuid__": "7c5f26c4-f052-40b0-9788-c0e5c4f209b2",
+      "__expectedType__": "cc.Prefab"
+    },
+    "identifier": "cell",
+    "comp": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 720,
+      "height": 1280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "d6rUX5yfhMlKoWX2bSbawx"
+  },
+  {
+    "__type__": "cc.Canvas",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_cameraComponent": {
+      "__id__": 4
+    },
+    "_alignCanvasWithScreen": true,
+    "_id": "12O/ljcVlEqLmVm3U2gEOQ"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 5.684341886080802e-14,
+    "_bottom": 5.684341886080802e-14,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": "c5V1EV8IpMtrIvY1OE9t2u"
+  },
+  {
+    "__type__": "795d2737txC74uGAQLarTJb",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_id": "7fgnhCa5RCvIntnBknQ5LG"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": null,
+    "asset": null,
+    "fileId": "5d2f3c26-c7d2-48bd-bd13-ca5aa20a93c4",
+    "instance": null,
+    "targetOverrides": null
+  },
+  {
+    "__type__": "cc.SceneGlobals",
+    "ambient": {
+      "__id__": 15
+    },
+    "shadows": {
+      "__id__": 16
+    },
+    "_skybox": {
+      "__id__": 17
+    },
+    "fog": {
+      "__id__": 18
+    },
+    "octree": {
+      "__id__": 19
+    },
+    "skin": {
+      "__id__": 20
+    },
+    "lightProbeInfo": {
+      "__id__": 21
+    },
+    "bakedWithStationaryMainLight": false,
+    "bakedWithHighpLightmap": false
+  },
+  {
+    "__type__": "cc.AmbientInfo",
+    "_skyColorHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyColor": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyIllumHDR": 20000,
+    "_skyIllum": 20000,
+    "_groundAlbedoHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_groundAlbedo": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_skyColorLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.5,
+      "z": 0.8,
+      "w": 1
+    },
+    "_skyIllumLDR": 20000,
+    "_groundAlbedoLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.2,
+      "z": 0.2,
+      "w": 1
+    }
+  },
+  {
+    "__type__": "cc.ShadowsInfo",
+    "_enabled": false,
+    "_type": 0,
+    "_normal": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 1,
+      "z": 0
+    },
+    "_distance": 0,
+    "_shadowColor": {
+      "__type__": "cc.Color",
+      "r": 76,
+      "g": 76,
+      "b": 76,
+      "a": 255
+    },
+    "_maxReceived": 4,
+    "_size": {
+      "__type__": "cc.Vec2",
+      "x": 512,
+      "y": 512
+    }
+  },
+  {
+    "__type__": "cc.SkyboxInfo",
+    "_envLightingType": 0,
+    "_envmapHDR": null,
+    "_envmap": null,
+    "_envmapLDR": null,
+    "_diffuseMapHDR": null,
+    "_diffuseMapLDR": null,
+    "_enabled": false,
+    "_useHDR": true,
+    "_editableMaterial": null,
+    "_reflectionHDR": null,
+    "_reflectionLDR": null,
+    "_rotationAngle": 0
+  },
+  {
+    "__type__": "cc.FogInfo",
+    "_type": 0,
+    "_fogColor": {
+      "__type__": "cc.Color",
+      "r": 200,
+      "g": 200,
+      "b": 200,
+      "a": 255
+    },
+    "_enabled": false,
+    "_fogDensity": 0.3,
+    "_fogStart": 0.5,
+    "_fogEnd": 300,
+    "_fogAtten": 5,
+    "_fogTop": 1.5,
+    "_fogRange": 1.2,
+    "_accurate": false
+  },
+  {
+    "__type__": "cc.OctreeInfo",
+    "_enabled": false,
+    "_minPos": {
+      "__type__": "cc.Vec3",
+      "x": -1024,
+      "y": -1024,
+      "z": -1024
+    },
+    "_maxPos": {
+      "__type__": "cc.Vec3",
+      "x": 1024,
+      "y": 1024,
+      "z": 1024
+    },
+    "_depth": 8
+  },
+  {
+    "__type__": "cc.SkinInfo",
+    "_enabled": false,
+    "_blurRadius": 0.01,
+    "_sssIntensity": 3
+  },
+  {
+    "__type__": "cc.LightProbeInfo",
+    "_giScale": 1,
+    "_giSamples": 1024,
+    "_bounces": 2,
+    "_reduceRinging": 0,
+    "_showProbe": true,
+    "_showWireframe": true,
+    "_showConvex": false,
+    "_data": null,
+    "_lightProbeSphereVolume": 1
+  }
+]
\ No newline at end of file
diff --git a/list-3x/assets/home/table_in_page.scene.meta b/list-3x/assets/home/table_in_page.scene.meta
new file mode 100644
index 0000000..bc4638d
--- /dev/null
+++ b/list-3x/assets/home/table_in_page.scene.meta
@@ -0,0 +1 @@
+{"ver":"1.1.45","importer":"scene","imported":true,"uuid":"cbfd651a-8d93-4763-bec9-718b1b7cb8c2","files":[".json"],"subMetas":{},"userData":{}}
diff --git a/list-3x/assets/home/table_in_page.ts b/list-3x/assets/home/table_in_page.ts
new file mode 100644
index 0000000..12b7ef0
--- /dev/null
+++ b/list-3x/assets/home/table_in_page.ts
@@ -0,0 +1,31 @@
+import { _decorator, Component, Label } from 'cc';
+import { YXCollectionView } from '../lib/yx-collection-view';
+import { PageLayout } from '../lib/page-layout';
+const { ccclass, property } = _decorator;
+
+@ccclass('table_in_page')
+export class table_in_page extends Component {
+    protected start(): void {
+        const listComp = this.node.getChildByName('list').getComponent(YXCollectionView)
+
+        listComp.ignoreScrollEndedDuringAutoScroll = true
+        listComp.numberOfItems = () => {
+            return 5
+        }
+        listComp.cellForItemAt = (indexPath, collectionView) => {
+            let index = indexPath.row % 5
+            const cell = collectionView.dequeueReusableCell(`cell`)
+            cell.getChildByName('label').getComponent(Label).string = `左右滑动切换页面` + `\n` + `当前页面: ` + `${index}`
+            return cell
+        }
+
+        let layout = new PageLayout()
+        // 这个属性用来控制是否循环滚动  
+        layout.loop = false
+        listComp.layout = layout
+
+        listComp.reloadData()
+    }
+}
+
+
diff --git a/list-3x/assets/home/table_in_page.ts.meta b/list-3x/assets/home/table_in_page.ts.meta
new file mode 100644
index 0000000..fe70a38
--- /dev/null
+++ b/list-3x/assets/home/table_in_page.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "795d2ef7-eedc-42ef-8b86-0102daad325b",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/list-3x/assets/home/table_sublist.scene b/list-3x/assets/home/table_sublist.scene
new file mode 100644
index 0000000..a6e8e63
--- /dev/null
+++ b/list-3x/assets/home/table_sublist.scene
@@ -0,0 +1,588 @@
+[
+  {
+    "__type__": "cc.SceneAsset",
+    "_name": "table_sublist",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_native": "",
+    "scene": {
+      "__id__": 1
+    }
+  },
+  {
+    "__type__": "cc.Scene",
+    "_name": "table_sublist",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      }
+    ],
+    "_active": true,
+    "_components": [],
+    "_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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "autoReleaseAssets": false,
+    "_globals": {
+      "__id__": 15
+    },
+    "_id": "addde7a9-b10c-4157-83e1-8a53476a6ace"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Canvas",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 5
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 10
+      },
+      {
+        "__id__": 11
+      },
+      {
+        "__id__": 12
+      },
+      {
+        "__id__": 13
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 360,
+      "y": 640,
+      "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": "beI88Z2HpFELqR4T5EMHpg"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Camera",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 1000
+    },
+    "_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": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "ebFwiq8gBFaYpqYbdoDODe"
+  },
+  {
+    "__type__": "cc.Camera",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 3
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_projection": 0,
+    "_priority": 0,
+    "_fov": 45,
+    "_fovAxis": 0,
+    "_orthoHeight": 640,
+    "_near": 0,
+    "_far": 1000,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_depth": 1,
+    "_stencil": 0,
+    "_clearFlags": 7,
+    "_rect": {
+      "__type__": "cc.Rect",
+      "x": 0,
+      "y": 0,
+      "width": 1,
+      "height": 1
+    },
+    "_aperture": 19,
+    "_shutter": 7,
+    "_iso": 0,
+    "_screenScale": 1,
+    "_visibility": 1108344832,
+    "_targetTexture": null,
+    "_postProcess": null,
+    "_usePostProcess": false,
+    "_cameraType": -1,
+    "_trackingType": 0,
+    "_id": "63WIch3o5BEYRlXzTT0oWc"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "list",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 6
+      },
+      {
+        "__id__": 7
+      }
+    ],
+    "_prefab": null,
+    "_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": "d1/dCc9yNJ44lI4TRGfy4z"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 720,
+      "height": 1280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "315xpp6rxGVIpwfAByHAu2"
+  },
+  {
+    "__type__": "f94cbxum3xAsomhVNW1piY0",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "mask": true,
+    "scrollEnabled": true,
+    "wheelScrollEnabled": true,
+    "scrollDirection": 1,
+    "mode": 0,
+    "preloadNodesLimitPerFrame": 2,
+    "frameInterval": 1,
+    "recycleInterval": 1,
+    "autoReloadOnSizeChange": false,
+    "registerCellForEditor": [
+      {
+        "__id__": 8
+      }
+    ],
+    "registerSupplementaryForEditor": [
+      {
+        "__id__": 9
+      }
+    ],
+    "_id": "540sP7RuVMr66Fyji3wiJs"
+  },
+  {
+    "__type__": "_yx_editor_register_element_info",
+    "prefab": {
+      "__uuid__": "c8b689a4-ae47-4041-8c9c-7298939e76be",
+      "__expectedType__": "cc.Prefab"
+    },
+    "identifier": "cell",
+    "comp": ""
+  },
+  {
+    "__type__": "_yx_editor_register_element_info",
+    "prefab": {
+      "__uuid__": "c8b689a4-ae47-4041-8c9c-7298939e76be",
+      "__expectedType__": "cc.Prefab"
+    },
+    "identifier": "header",
+    "comp": ""
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 720,
+      "height": 1280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "d6rUX5yfhMlKoWX2bSbawx"
+  },
+  {
+    "__type__": "cc.Canvas",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_cameraComponent": {
+      "__id__": 4
+    },
+    "_alignCanvasWithScreen": true,
+    "_id": "12O/ljcVlEqLmVm3U2gEOQ"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 5.684341886080802e-14,
+    "_bottom": 5.684341886080802e-14,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": "c5V1EV8IpMtrIvY1OE9t2u"
+  },
+  {
+    "__type__": "72eebI6ZkpMca5vkdlt7bSx",
+    "_name": "",
+    "_objFlags": 0,
+    "__editorExtras__": {},
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_id": "adYAwgxuBG+YQTfpqxP4Xj"
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": null,
+    "asset": null,
+    "fileId": "5d2f3c26-c7d2-48bd-bd13-ca5aa20a93c4",
+    "instance": null,
+    "targetOverrides": null
+  },
+  {
+    "__type__": "cc.SceneGlobals",
+    "ambient": {
+      "__id__": 16
+    },
+    "shadows": {
+      "__id__": 17
+    },
+    "_skybox": {
+      "__id__": 18
+    },
+    "fog": {
+      "__id__": 19
+    },
+    "octree": {
+      "__id__": 20
+    },
+    "skin": {
+      "__id__": 21
+    },
+    "lightProbeInfo": {
+      "__id__": 22
+    },
+    "bakedWithStationaryMainLight": false,
+    "bakedWithHighpLightmap": false
+  },
+  {
+    "__type__": "cc.AmbientInfo",
+    "_skyColorHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyColor": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0.520833125
+    },
+    "_skyIllumHDR": 20000,
+    "_skyIllum": 20000,
+    "_groundAlbedoHDR": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_groundAlbedo": {
+      "__type__": "cc.Vec4",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 0
+    },
+    "_skyColorLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.5,
+      "z": 0.8,
+      "w": 1
+    },
+    "_skyIllumLDR": 20000,
+    "_groundAlbedoLDR": {
+      "__type__": "cc.Vec4",
+      "x": 0.2,
+      "y": 0.2,
+      "z": 0.2,
+      "w": 1
+    }
+  },
+  {
+    "__type__": "cc.ShadowsInfo",
+    "_enabled": false,
+    "_type": 0,
+    "_normal": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 1,
+      "z": 0
+    },
+    "_distance": 0,
+    "_shadowColor": {
+      "__type__": "cc.Color",
+      "r": 76,
+      "g": 76,
+      "b": 76,
+      "a": 255
+    },
+    "_maxReceived": 4,
+    "_size": {
+      "__type__": "cc.Vec2",
+      "x": 512,
+      "y": 512
+    }
+  },
+  {
+    "__type__": "cc.SkyboxInfo",
+    "_envLightingType": 0,
+    "_envmapHDR": null,
+    "_envmap": null,
+    "_envmapLDR": null,
+    "_diffuseMapHDR": null,
+    "_diffuseMapLDR": null,
+    "_enabled": false,
+    "_useHDR": true,
+    "_editableMaterial": null,
+    "_reflectionHDR": null,
+    "_reflectionLDR": null,
+    "_rotationAngle": 0
+  },
+  {
+    "__type__": "cc.FogInfo",
+    "_type": 0,
+    "_fogColor": {
+      "__type__": "cc.Color",
+      "r": 200,
+      "g": 200,
+      "b": 200,
+      "a": 255
+    },
+    "_enabled": false,
+    "_fogDensity": 0.3,
+    "_fogStart": 0.5,
+    "_fogEnd": 300,
+    "_fogAtten": 5,
+    "_fogTop": 1.5,
+    "_fogRange": 1.2,
+    "_accurate": false
+  },
+  {
+    "__type__": "cc.OctreeInfo",
+    "_enabled": false,
+    "_minPos": {
+      "__type__": "cc.Vec3",
+      "x": -1024,
+      "y": -1024,
+      "z": -1024
+    },
+    "_maxPos": {
+      "__type__": "cc.Vec3",
+      "x": 1024,
+      "y": 1024,
+      "z": 1024
+    },
+    "_depth": 8
+  },
+  {
+    "__type__": "cc.SkinInfo",
+    "_enabled": false,
+    "_blurRadius": 0.01,
+    "_sssIntensity": 3
+  },
+  {
+    "__type__": "cc.LightProbeInfo",
+    "_giScale": 1,
+    "_giSamples": 1024,
+    "_bounces": 2,
+    "_reduceRinging": 0,
+    "_showProbe": true,
+    "_showWireframe": true,
+    "_showConvex": false,
+    "_data": null,
+    "_lightProbeSphereVolume": 1
+  }
+]
\ No newline at end of file
diff --git a/list-3x/assets/home/table_sublist.scene.meta b/list-3x/assets/home/table_sublist.scene.meta
new file mode 100644
index 0000000..2c0cef6
--- /dev/null
+++ b/list-3x/assets/home/table_sublist.scene.meta
@@ -0,0 +1 @@
+{"ver":"1.1.45","importer":"scene","imported":true,"uuid":"addde7a9-b10c-4157-83e1-8a53476a6ace","files":[".json"],"subMetas":{},"userData":{}}
diff --git a/list-3x/assets/home/table_sublist.ts b/list-3x/assets/home/table_sublist.ts
new file mode 100644
index 0000000..7d8cb52
--- /dev/null
+++ b/list-3x/assets/home/table_sublist.ts
@@ -0,0 +1,126 @@
+import { _decorator, Component, Label, math, Node, Sprite } from 'cc';
+import { YXCollectionView } from '../lib/yx-collection-view';
+import { YXTableLayout } from '../lib/yx-table-layout';
+const { ccclass, property } = _decorator;
+
+let __ID__ = 0
+const data = [
+    {
+        id: __ID__++,
+        title: "DATA-A",
+        list: [
+            { name: "data-a-1" },
+            { name: "data-a-2" },
+            { name: "data-a-3" },
+            { name: "data-a-4" },
+            { name: "data-a-5" },
+        ]
+    },
+    {
+        id: __ID__++,
+        title: "DATA-B",
+        list: [
+            { name: "data-b-1" },
+            { name: "data-b-2" },
+            { name: "data-b-3" },
+            { name: "data-b-4" },
+            { name: "data-b-5" },
+        ]
+    },
+    {
+        id: __ID__++,
+        title: "DATA-C",
+        list: [
+            { name: "data-c-1" },
+            { name: "data-c-2" },
+            { name: "data-c-3" },
+            { name: "data-c-4" },
+            { name: "data-c-5" },
+        ]
+    },
+    {
+        id: __ID__++,
+        title: "DATA-D",
+        list: [
+            { name: "data-d-1" },
+            { name: "data-d-2" },
+            { name: "data-d-3" },
+            { name: "data-d-4" },
+            { name: "data-d-5" },
+        ]
+    },
+    {
+        id: __ID__++,
+        title: "DATA-E",
+        list: [
+            { name: "data-e-1" },
+            { name: "data-e-2" },
+            { name: "data-e-3" },
+            { name: "data-e-4" },
+            { name: "data-e-5" },
+        ]
+    },
+]
+
+@ccclass('table_sublist')
+export class table_sublist extends Component {
+    openIds = new Map<number, boolean>()
+    protected start(): void {
+        const listComp = this.node.getChildByName('list').getComponent(YXCollectionView)
+
+        listComp.numberOfSections = () => {
+            return data.length
+        }
+
+        listComp.numberOfItems = (section) => {
+            let sectionData = data[section]
+            let isOpen = this.openIds.get(sectionData.id) ?? false
+            if (isOpen) {
+                return data[section].list.length
+            }
+            return 0
+        }
+
+        listComp.supplementaryForItemAt = (indexPath, collectionView, kinds) => {
+            let sectionData = data[indexPath.section]
+            if (kinds === YXTableLayout.SupplementaryKinds.HEADER) {
+                const header = collectionView.dequeueReusableSupplementary(`header`)
+                header.getChildByName('label').getComponent(Label).string = sectionData.title + "\n" + "点击展开/收起子列表"
+                header.getChildByName('shape').getComponent(Sprite).color = new math.Color(100, 100, 200)
+                return header
+            }
+
+            return null
+        }
+
+        listComp.cellForItemAt = (indexPath, collectionView) => {
+            let rowData = data[indexPath.section].list[indexPath.row]
+            const cell = collectionView.dequeueReusableCell(`cell`)
+            cell.getChildByName('label').getComponent(Label).string = rowData.name
+            return cell
+        }
+
+        listComp.onTouchSupplementaryAt = (indexPath, collectionView, kinds) => {
+            let sectionData = data[indexPath.section]
+            if (kinds === YXTableLayout.SupplementaryKinds.HEADER) {
+                let isOpen = this.openIds.get(sectionData.id) ?? false
+                this.openIds.set(sectionData.id, !isOpen) // 取反
+                collectionView.reloadData()
+            }
+        }
+
+        let layout = new YXTableLayout()
+        layout.top = 10
+        layout.spacing = 10
+        layout.bottom = 10
+        layout.rowHeight = 120
+        layout.sectionHeaderHeight = 150
+        // 这个属性用来控制 header 是否悬浮  
+        layout.sectionHeadersPinToVisibleBounds = false
+        listComp.layout = layout
+
+        listComp.reloadData()
+    }
+}
+
+
diff --git a/list-3x/assets/home/table_sublist.ts.meta b/list-3x/assets/home/table_sublist.ts.meta
new file mode 100644
index 0000000..11b7cc9
--- /dev/null
+++ b/list-3x/assets/home/table_sublist.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "72eeb23a-664a-4c71-ae6f-91d96dedb4b1",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/list-3x/assets/lib/grid-layout.ts b/list-3x/assets/lib/grid-layout.ts
index 1a6925b..677746a 100644
--- a/list-3x/assets/lib/grid-layout.ts
+++ b/list-3x/assets/lib/grid-layout.ts
@@ -1,8 +1,10 @@
 import { math, UITransform, warn } from "cc";
 import { YXCollectionView, YXIndexPath, YXLayout, YXLayoutAttributes } from "./yx-collection-view";
 
+/**
+ * 网格布局
+ */
 export class GridLayout extends YXLayout {
-
     /**
      * 节点大小  
      */
@@ -18,11 +20,24 @@ export class GridLayout extends YXLayout {
      */
     verticalSpacing: number = 0
 
+    /**
+     * @deprecated contentAlignment
+     */
+    set alignment(value: number) {
+        this.contentAlignment = value
+    }
+
     /**
      * 整体对齐方式  
      * 0靠左 1居中 2靠右  
      */
-    alignment: number = 1
+    contentAlignment: number = 1
+
+    /**
+     * 最后一行元素的对齐方式  
+     * 0靠左 1居中 2靠右  (默认 null，靠左)  
+     */
+    lastRowAlignment?: number = null
 
     /**
      * 获取每行最多可以容纳多少个节点  
@@ -64,15 +79,14 @@ export class GridLayout extends YXLayout {
         // 计算每行最多可以放多少个节点
         this._maxItemsPerRow = null
         let num = this.getMaxItemsPerRow(collectionView)
+        let maxWidth = (num * this.itemSize.width + (num - 1) * this.horizontalSpacing) // 每行节点需要占用的总宽度
 
         // 根据设置的对齐方式计算左边距
         let left = 0
-        if (this.alignment == 1) {
-            let maxWidth = (num * this.itemSize.width + (num - 1) * this.horizontalSpacing) // 每行节点总宽度
+        if (this.contentAlignment == 1) {
             left = (width - maxWidth) * 0.5
         }
-        if (this.alignment == 2) {
-            let maxWidth = (num * this.itemSize.width + (num - 1) * this.horizontalSpacing) // 每行节点总宽度
+        if (this.contentAlignment == 2) {
             left = width - maxWidth
         }
 
@@ -80,6 +94,10 @@ export class GridLayout extends YXLayout {
         if (numberOfSections > 1) { warn(`GridLayout 暂时不支持分区模式`) }
 
         const numberOfItems = collectionView.getNumberOfItems(0)
+        // 计算元素一共有多少行
+        let total = Math.ceil(numberOfItems / num)
+        // 临时记录最后一行的元素  
+        let lastAttrs: YXLayoutAttributes[] = []
         for (let index = 0; index < numberOfItems; index++) {
 
             // 计算这个节点是第几行
@@ -101,6 +119,26 @@ export class GridLayout extends YXLayout {
 
             // 更新内容高度
             contentSize.height = Math.max(contentSize.height, attr.frame.yMax)
+
+            if (row == total - 1) {
+                lastAttrs.push(attr)
+            }
+        }
+
+        // 单独调整最后一行元素的对齐方式
+        if (this.lastRowAlignment != null) {
+            let tempLeft = left
+            if (this.lastRowAlignment == 1) {
+                tempLeft = left + (maxWidth - this.itemSize.width * lastAttrs.length - this.horizontalSpacing * (lastAttrs.length - 1)) * 0.5
+            }
+            if (this.lastRowAlignment == 2) {
+                tempLeft = left + (maxWidth - this.itemSize.width * lastAttrs.length - this.horizontalSpacing * (lastAttrs.length - 1))
+            }
+            for (let index = 0; index < lastAttrs.length; index++) {
+                const attr = lastAttrs[index]
+                attr.frame.x = tempLeft
+                tempLeft = attr.frame.xMax + this.horizontalSpacing
+            }
         }
 
         this.attributes = attrs
@@ -137,4 +175,3 @@ export class GridLayout extends YXLayout {
         return this.attributes.slice(startIdx, endIdx)
     }
 }
-
diff --git a/list-3x/assets/lib/page-layout.ts b/list-3x/assets/lib/page-layout.ts
new file mode 100644
index 0000000..f6ff5eb
--- /dev/null
+++ b/list-3x/assets/lib/page-layout.ts
@@ -0,0 +1,144 @@
+import { log, math, warn } from "cc";
+import { YXCollectionView, YXIndexPath, YXLayout, YXLayoutAttributes } from "./yx-collection-view";
+
+/**
+ * PageView 布局
+ */
+export class PageLayout extends YXLayout {
+    /**
+     * 是否开启分页效果  
+     */
+    private pagingEnabled: boolean = true
+
+    /**
+     * 分页效果开启时，自动吸附动画时间  
+     */
+    pagingAnimationDuration: number = 0.5
+
+    /**
+     * 循环滚动，默认关闭  
+     * 注意: 当开启循环滚动时，YXCollectionView 需要额外设置 `ignoreScrollEndedDuringAutoScroll = true`  
+     * 注意: 开启循环滚动会生成较大范围的 `indexPath`，在使用索引的时候需要进行取余处理   
+     * 
+     * @example  
+     * listComp.ignoreScrollEndedDuringAutoScroll = true  
+     * listComp.numberOfItems = () => {
+     *      return <data-length>
+     * }
+     * listComp.cellForItemAt = (indexPath, collectionView) => {
+     *      let index = indexPath.row % <data-length> // 通过取余获取真实数据索引  
+     *      const cell = collectionView.dequeueReusableCell(`cell`)
+     *      return cell
+     * }
+     */
+    loop: boolean = false
+
+    /**
+     * 仅开启循环滚动时生效，由于循环滚动是伪循环，如果不间断的朝着某一个方向一直滑是会滑到头的 (就像苹果的闹钟时间可以滑到尽头...)    
+     * 调整这个属性可以放大滚动范围，避免滑动到头穿帮  
+     * 会生成额外的布局属性，建议范围 1 ~ 10，默认: 5 (实际情况可以看数据压力，数据不多的话可以设置更大)  
+     */
+    scrollRangeMultiplier: number = 5
+    private get safeScrollRangeMultiplier(): number {
+        let value = Math.floor(this.scrollRangeMultiplier)
+        return Math.max(1, value)
+    }
+
+    prepare(collectionView: YXCollectionView): void {
+        collectionView.scrollView.horizontal = true
+        collectionView.scrollView.vertical = false
+        if (collectionView.scrollDirection === YXCollectionView.ScrollDirection.VERTICAL) {
+            warn(`PageLayout 仅支持水平方向排列`)
+        }
+
+        const numberOfSections = collectionView.getNumberOfSections()
+        if (numberOfSections > 1) { warn(`GridLayout 暂时不支持分区模式`) }
+
+        let contentSize = collectionView.scrollView.view.contentSize.clone()
+        let attrs = []
+
+        let itemSize = collectionView.scrollView.view.contentSize
+        let numberOfItems = collectionView.getNumberOfItems(0)
+        if (this.loop) {
+            numberOfItems = numberOfItems * 3 * this.safeScrollRangeMultiplier
+            if (collectionView.ignoreScrollEndedDuringAutoScroll == false) {
+                warn(`PageLayout: 开启循环滚动时建议将 YXCollectionView.ignoreScrollEndedDuringAutoScroll 设置为 true`)
+            }
+        }
+        for (let index = 0; index < numberOfItems; index++) {
+            let attr = YXLayoutAttributes.layoutAttributesForCell(new YXIndexPath(0, index))
+            attr.frame.x = itemSize.width * index
+            attr.frame.y = 0
+            attr.frame.width = itemSize.width
+            attr.frame.height = itemSize.height
+            attrs.push(attr)
+            contentSize.width = Math.max(contentSize.width, attr.frame.xMax)
+        }
+
+        this.attributes = attrs
+        this.contentSize = contentSize
+    }
+
+    initOffset(collectionView: YXCollectionView): void {
+        if (this.loop) {
+            let numberOfItems = collectionView.getNumberOfItems(0)
+            let offset = new math.Vec2()
+            offset.x = numberOfItems * this.safeScrollRangeMultiplier * collectionView.scrollView.view.width
+            offset.y = 0
+            collectionView.scrollView.scrollToOffset(offset, 0)
+        } else {
+            collectionView.scrollView.scrollToLeft()
+        }
+    }
+
+    targetOffset(collectionView: YXCollectionView, touchMoveVelocity: math.Vec3, startOffset: math.Vec2, originTargetOffset: math.Vec2, originScrollDuration: number): { offset: math.Vec2; time?: number; attenuated?: boolean; } | null {
+        if (this.pagingEnabled == false) {
+            return null
+        }
+        let offset = collectionView.scrollView.getScrollOffset()
+        offset.x = - offset.x
+        let threshold = 0.2
+        let idx = Math.round(offset.x / collectionView.scrollView.view.width)
+        let r = touchMoveVelocity.x / collectionView.scrollView.view.width
+        if (startOffset && Math.abs(r) >= threshold) {
+            idx = Math.round(startOffset.x / collectionView.scrollView.view.width) + (r > 0 ? -1 : 1)
+        }
+        offset.x = idx * collectionView.scrollView.view.width
+        return { offset: offset, time: this.pagingAnimationDuration }
+    }
+
+    layoutAttributesForElementsInRect(rect: math.Rect, collectionView: YXCollectionView): YXLayoutAttributes[] {
+        if (collectionView.scrollView.view.width <= 0 || this.attributes.length <= 0) {
+            return super.layoutAttributesForElementsInRect(rect, collectionView)
+        }
+        // 直接计算出当前元素位置，另外额外返回左右两边的元素
+        let result = []
+        let idx = Math.round(rect.x / collectionView.scrollView.view.width)
+        let previousIdx = idx - 1
+        let latterIdx = idx + 1
+        if (idx >= 0 && idx < this.attributes.length) {
+            result.push(this.attributes[idx])
+        }
+        if (previousIdx >= 0 && previousIdx < this.attributes.length && previousIdx != idx) {
+            result.push(this.attributes[previousIdx])
+        }
+        if (latterIdx >= 0 && latterIdx < this.attributes.length && latterIdx != idx) {
+            result.push(this.attributes[latterIdx])
+        }
+        return result
+    }
+
+    onScrollEnded(collectionView: YXCollectionView): void {
+        if (this.loop == false) {
+            return
+        }
+        let numberOfItems = collectionView.getNumberOfItems(0)
+        let offset = collectionView.scrollView.getScrollOffset()
+        offset.x = - offset.x
+        let idx = Math.round(offset.x / collectionView.scrollView.view.width) % numberOfItems
+        offset.x = collectionView.scrollView.view.width * (numberOfItems * this.safeScrollRangeMultiplier + idx)
+        collectionView.scrollView.scrollToOffset(offset)
+        // 直接设置滚动位置不会触发刷新，这里强制刷新一下
+        collectionView.markForUpdateVisibleData(true)
+    }
+}
\ No newline at end of file
diff --git a/list-3x/assets/lib/page-layout.ts.meta b/list-3x/assets/lib/page-layout.ts.meta
new file mode 100644
index 0000000..2609d16
--- /dev/null
+++ b/list-3x/assets/lib/page-layout.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "0b60b98b-e96f-4ced-8e6c-87910ed7b6d1",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/list-3x/assets/lib/yx-collection-view.ts b/list-3x/assets/lib/yx-collection-view.ts
index 2ad4477..fc95c59 100644
--- a/list-3x/assets/lib/yx-collection-view.ts
+++ b/list-3x/assets/lib/yx-collection-view.ts
@@ -645,6 +645,7 @@ export class YXCollectionView extends Component {
     /**
      * 滚动过程中，每多少帧回收一次不可见节点，1表示每帧都回收，0表示不在滚动过程中回收不可见节点
      * @bug 滚动过程中如果实时的回收不可见节点，有时候会收不到 scroll view 的 cancel 事件，导致 scroll view 的滚动状态不会更新 (且收不到滚动结束事件)
+     * @bug 列表滚动时卡住不会正常回弹  
      * @fix 当这个属性设置为 0 时，只会在 `touch-up` 和 `scroll-ended` 里面回收不可见节点  
      */
     @property({ tooltip: `滚动过程中，每多少帧回收一次不可见节点，1表示每帧都回收，0表示不在滚动过程中回收不可见节点` })
@@ -755,6 +756,10 @@ export class YXCollectionView extends Component {
             let cell = result.getComponent(_yx_node_element_comp) || result.addComponent(_yx_node_element_comp)
             cell.identifier = identifier
 
+            /**
+             * @todo 滑动很快的时候似乎偶尔会触发 `Error occurs in an event listener: touch-start`  
+             * 复现条件: 列表嵌套 && 快速滑动 && 刷新列表，像是刷新后把 cell node 给回收了导致的  
+             */
             result.on(NodeEventType.TOUCH_END, this.onTouchElement, this)
         }
         return result
diff --git a/list-3x/assets/lib/yx-table-layout.ts b/list-3x/assets/lib/yx-table-layout.ts
index 9ccfa3e..b88ea1c 100644
--- a/list-3x/assets/lib/yx-table-layout.ts
+++ b/list-3x/assets/lib/yx-table-layout.ts
@@ -6,6 +6,10 @@ enum _yx_table_layout_supplementary_kinds {
     FOOTER = 'footer',
 }
 
+/**
+ * TableView 布局  
+ * 这个布局实现了 YXCollectionView 约定的大部分的概念，有想深入了解自定义布局的可以拿这套布局当作参考   
+ */
 export class YXTableLayout extends YXLayout {
 
     /**
@@ -181,7 +185,7 @@ export class YXTableLayout extends YXLayout {
         }
 
         // 重要: 设置内容区域总大小，只有确定了滚动区域的大小列表才能滚动  
-        this.contentSize = new math.Size(contentWidth, contentHeight)
+        this.contentSize = new math.Size(contentWidth, Math.max(contentHeight, collectionView.scrollView.view.height))
     }
 
     initOffset(collectionView: YXCollectionView): void {
diff --git a/list-3x/settings/v2/packages/project.json b/list-3x/settings/v2/packages/project.json
index 2e889fa..ef94460 100644
--- a/list-3x/settings/v2/packages/project.json
+++ b/list-3x/settings/v2/packages/project.json
@@ -1,3 +1,11 @@
 {
-  "__version__": "1.0.5"
+  "__version__": "1.0.5",
+  "general": {
+    "designResolution": {
+      "width": 720,
+      "height": 1280,
+      "fitHeight": true,
+      "fitWidth": false
+    }
+  }
 }