2x 新版本

list-2x/assets/home/home.ts

@@ -10,50 +10,115 @@ import { YXTableLayout } from "../lib/yx-table-layout";
 
 const { ccclass, property } = cc._decorator;
 
-class Data {
-    id: number
-}
 
 @ccclass
 export default class NewClass extends cc.Component {
 
-    @property(YXCollectionView)
-    listComp: YXCollectionView = null
-
-    testData: Data[] = []
-
     protected start(): void {
+        this.setup_list1()
+        this.setup_list2()
+        this.setup_list3()
+    }
+    
+    setup_list1() {
+        const listComp = this.node.getChildByName('list1').getComponent(YXCollectionView)
 
-        // 绑定数据源
-        this.listComp.numberOfItems = () => this.testData.length
-        this.listComp.cellForItemAt = (indexPath, collectionView) => {
-            const rowData = this.testData[indexPath.item]
+        listComp.numberOfItems = () => 10000
+        listComp.cellForItemAt = (indexPath, collectionView) => {
             const cell = collectionView.dequeueReusableCell(`cell`)
             cell.getChildByName('label').getComponent(cc.Label).string = `${indexPath}`
             return cell
         }
 
-        // 确定布局方案  
         let layout = new YXTableLayout()
         layout.spacing = 20
-        layout.itemSize = new cc.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(cc.Label).string = `header  ${indexPath}`
+                const shape = supplementary.getChildByName('shape')
+                shape.color = new cc.Color(100, 100, 150)
+                return supplementary
+            }
+            if (kinds === YXTableLayout.SupplementaryKinds.FOOTER) {
+                const supplementary = collectionView.dequeueReusableSupplementary('supplementary')
+                supplementary.getChildByName('label').getComponent(cc.Label).string = `footer  ${indexPath}`
+                const shape = supplementary.getChildByName('shape')
+                shape.color = new cc.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(cc.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(cc.Label).string = `header  ${indexPath}`
+                const shape = supplementary.getChildByName('shape')
+                shape.color = new cc.Color(100, 100, 150)
+                return supplementary
+            }
+            if (kinds === YXTableLayout.SupplementaryKinds.FOOTER) {
+                const supplementary = collectionView.dequeueReusableSupplementary('supplementary')
+                supplementary.getChildByName('label').getComponent(cc.Label).string = `footer  ${indexPath}`
+                const shape = supplementary.getChildByName('shape')
+                shape.color = new cc.Color(150, 100, 100)
+                return supplementary
+            }
+            return null
+        }
+
+        listComp.numberOfItems = () => 20
+        listComp.cellForItemAt = (indexPath, collectionView) => {
+            const cell = collectionView.dequeueReusableCell(`cell`)
+            cell.getChildByName('label').getComponent(cc.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()
     }
 }