3x 新版本

2025-12-08 21:58:51 +00:00 · 2025-01-08 23:03:52 +08:00
parent aecd893457
commit 1c825731dc
4 changed files with 1135 additions and 566 deletions
--- a/list-3x/assets/home/home.ts
+++ b/list-3x/assets/home/home.ts
@@ -1,53 +1,118 @@
-import { _decorator, Component, Label, math, Node } from 'cc';
+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;

-class Data {
-    id: number
-}

@ccclass('home')
 export class home extends Component {

-    @property(YXCollectionView)
-    listComp: YXCollectionView = null
-
-    testData: Data[] = []
-
    protected start(): void {
+        this.setup_list1()
+        this.setup_list2()
+        this.setup_list3()
+    }

-        // 绑定数据源
-        this.listComp.numberOfItems = () => this.testData.length
-        this.listComp.cellForItemAt = (indexPath, collectionView) => {
-            const rowData = this.testData[indexPath.item]
+    setup_list1() {
+        const listComp = this.node.getChildByName('list1').getComponent(YXCollectionView)
+
+        listComp.numberOfItems = () => 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 = 20
-        layout.itemSize = new math.Size(400, 100)
-        this.listComp.layout = layout
+        layout.rowHeight = 100
+        listComp.layout = layout

-        this.receivedData()
+        listComp.reloadData()
    }

-    /**
-     * 模拟收到数据  
-     */
-    receivedData() {
-        this.testData = []
-        for (let index = 0; index < 1000; index++) {
-            let data = new Data()
-            data.id = index
-            this.testData.push(data)
+    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
        }

-        // 刷新列表
-        this.listComp.reloadData()
+        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()
    }
 }