[add] All

assets/scripts/auto-center.ts

@@ -0,0 +1,20 @@
+
+import { _decorator, Component, Node, EditBox, Label } from 'cc';
+import { Simple } from './simple';
+const { ccclass, property } = _decorator;
+
+@ccclass('AutoCenter')
+export class AutoCenter extends Simple {
+    @property(Label) label!: Label
+    @property key: string = ""
+    start() {
+        this.label.string = `当前中心锚点：${(this.layout.centerAnchor as any)[this.key]}`
+    }
+    onInputAnchor(event: EditBox) {
+        let anchor = Number(event.string)
+        if (isNaN(anchor)) return
+        (this.layout.centerAnchor as any)[this.key] = anchor
+        this.layout.scrollToCenter()
+        this.label.string = `当前中心锚点：${(this.layout.centerAnchor as any)[this.key]}`
+    }
+}

assets/scripts/auto-center.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "4c92cb3b-cfaf-47d6-8875-9ea25f168a16",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/baseItem.ts

@@ -0,0 +1,41 @@
+
+import { _decorator, Component, Node, Label, EditBox, Size, math } from 'cc';
+import { SuperLayout } from '../core/super-layout';
+const { ccclass, property } = _decorator;
+
+@ccclass('BaseItem')
+export class BaseItem extends Component {
+    @property(Label) label!: Label
+    @property(EditBox) input!: EditBox
+    layout: SuperLayout = null!
+    private index!: number
+    private clickFunc!: Function
+    get transform() {
+        return this.node._uiProps.uiTransformComp
+    }
+    show(data: any, index: number, callback: Function, layout: SuperLayout) {
+        this.index = index
+        this.label.string = data.message
+        this.clickFunc = callback
+        this.layout = layout
+
+    }
+    onClick() {
+        this.clickFunc?.call(this, this.index)
+    }
+
+    onInput() {
+
+    }
+}
+
+/**
+ * [1] Class member could be defined like this.
+ * [2] Use `property` decorator if your want the member to be serializable.
+ * [3] Your initialization goes here.
+ * [4] Your update function goes here.
+ *
+ * Learn more about scripting: https://docs.cocos.com/creator/3.0/manual/en/scripting/
+ * Learn more about CCClass: https://docs.cocos.com/creator/3.0/manual/en/scripting/ccclass.html
+ * Learn more about life-cycle callbacks: https://docs.cocos.com/creator/3.0/manual/en/scripting/life-cycle-callbacks.html
+ */

assets/scripts/baseItem.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "747fc08b-96a5-46b8-bc1f-095d428e6666",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/baseMain.ts

@@ -0,0 +1,46 @@
+
+import { _decorator, Component, Node, EditBox, director } from 'cc';
+import { SuperLayout } from '../core/super-layout';
+import { BaseItem } from './baseItem';
+const { ccclass, property } = _decorator;
+
+@ccclass('BaseMain')
+export class BaseMain extends Component {
+    @property(SuperLayout) layout!: SuperLayout
+    @property(EditBox) input!: EditBox
+    protected datas: any[] = []
+
+    toHeader() {
+        this.layout.scrollToHeader(1)
+    }
+    toFooter() {
+        this.layout.scrollToFooter(1)
+    }
+    toIndex() {
+        var index = Number(this.input.string)
+        if (isNaN(index)) return
+        this.layout.scrollToIndex(index, 1)
+    }
+    toBack() {
+        director.loadScene("main")
+    }
+
+    onRefreshEvent(item: Node, index: number) {
+        if (!this.datas[index]) {
+            console.error(index, this.datas)
+        }
+        item.getComponent(BaseItem)?.show(this.datas[index], index, this.onClickItem.bind(this), this.layout)
+    }
+    onClickItem(index: number) {
+        this.datas.splice(index, 1)
+        this.layout.total(this.datas.length)
+    }
+    addItem(event: any, args: any) {
+        let count = Number(args)
+        if (isNaN(count)) return
+        for (let i = 0; i < count; i++) {
+            this.datas.push({ message: this.datas.length })
+        }
+        this.layout.total(this.datas.length)
+    }
+}

assets/scripts/baseMain.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "d886e837-709b-4aa0-93b3-3b8b04247059",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/chat-item.ts

@@ -0,0 +1,39 @@
+
+import { _decorator, Component, Node, Sprite, Label, Size, Overflow, Widget } from 'cc';
+import { SuperLayout } from '../core/super-layout';
+const { ccclass, property } = _decorator;
+
+@ccclass('ChatItem')
+export class ChatItem extends Component {
+    @property(Node) me: Node = null!
+    @property(Node) other: Node = null!
+    get transform() { return this.node._uiProps.uiTransformComp! }
+    start() {
+
+    }
+    show(data: any, index: number, layout: SuperLayout) {
+        var obj: Node = data.me ? this.me : this.other
+        this.me.active = data.me
+        this.other.active = !data.me
+        var background: Sprite = obj.getChildByName("background")?.getComponent(Sprite)!
+        var label: Label = background.node.getChildByName("label")?.getComponent(Label)!
+        label.string = data.msg
+        label.updateRenderData(true)
+        var labelTrans = label.node._uiProps.uiTransformComp!
+        var backgroundTrans = background.node._uiProps.uiTransformComp!
+        if (labelTrans.width > this.transform.width - 150) {
+            labelTrans.width = this.transform.width - 150
+            label.overflow = Overflow.RESIZE_HEIGHT
+        } else {
+            label.overflow = Overflow.NONE
+        }
+        label.updateRenderData(true)
+
+        backgroundTrans.width = labelTrans.width + 20
+        backgroundTrans.height = labelTrans.height + 10
+        this.transform.height = backgroundTrans.height
+        layout.updateItemSize(this.node, this.transform.contentSize)
+        obj.getComponent(Widget)?.updateAlignment()
+    }
+}
+

assets/scripts/chat-item.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "d1bf53c6-4f06-43c6-a4e5-f62182eadc61",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/chat.ts

@@ -0,0 +1,37 @@
+
+import { _decorator, Component, Node, EditBox } from 'cc';
+import { SuperLayout } from '../core/super-layout';
+import { ChatItem } from './chat-item';
+const { ccclass, property } = _decorator;
+
+@ccclass('Chat')
+export class Chat extends Component {
+    @property(SuperLayout) layout!: SuperLayout
+    @property(EditBox) input!: EditBox
+
+    private datas: any[] = []
+    onLoad() {
+
+    }
+    onSend() {
+        if (!this.input.string) return
+        var msg = this.input.string
+        this.sendMsg(true, msg)
+        this.unscheduleAllCallbacks()
+        this.scheduleOnce(() => {
+            this.sendMsg(false, msg)
+        }, 1)
+        this.input.string = ""
+    }
+    sendMsg(me: boolean, msg: string) {
+        this.datas.push({
+            me: me,
+            msg: msg
+        })
+        this.layout.total(this.datas.length)
+        this.layout.scrollToFooter(0.2)
+    }
+    onRefreshEvent(item: Node, index: number) {
+        item.getComponent(ChatItem)?.show(this.datas[index], index, this.layout)
+    }
+}

assets/scripts/chat.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "ae913d5c-ef10-49cc-82ec-cc20bd549147",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/horizontal.ts

@@ -0,0 +1,37 @@
+
+import { _decorator, Component, Node, Size } from 'cc';
+import { BaseItem } from './baseItem';
+import { SuperLayout } from '../core/super-layout';
+const { ccclass, property } = _decorator;
+
+@ccclass('Horizontal')
+export class Horizontal extends BaseItem {
+    onLoad() {
+        this.input.placeholder = this.transform?.width.toString()!
+    }
+    onInput() {
+        let width = Number(this.input.string)
+        if (isNaN(width)) return
+        if (width < 100) {
+            return
+        }
+        this.transform?.setContentSize(new Size(Number(this.input.string), this.transform.contentSize.height))
+        this.layout.updateItemSize(this.node, this.transform?.contentSize!)
+    }
+    show(data: any, index: number, callback: Function, layout: SuperLayout) {
+        super.show(data, index, callback, layout)
+        var time = Math.random() * 2
+        // const width = Math.random() * 200 + 100
+        var scale = Math.random()
+        scale = Math.max(0.5, scale)
+        scale = Math.min(2, scale)
+        const width = index % 2 == 0 ? 100 : 150
+        const size = new Size(width, this.transform?.height)
+        // this.unscheduleAllCallbacks()
+        // this.scheduleOnce(() => {
+        //     this.transform?.setContentSize(size)
+        // }, time)
+        // this.transform?.setContentSize(size)
+        // layout.updateItemSize(this.node, size)
+    }
+}

assets/scripts/horizontal.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "a3055143-44df-4d77-8843-e8fe7975540d",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/main.ts

@@ -0,0 +1,22 @@
+
+import { _decorator, Component, Node, director } from 'cc';
+const { ccclass, property } = _decorator;
+
+@ccclass('Main')
+export class Main extends Component {
+   
+    toScene(event:any,args:string){
+        director.loadScene(args)
+    }
+}
+
+/**
+ * [1] Class member could be defined like this.
+ * [2] Use `property` decorator if your want the member to be serializable.
+ * [3] Your initialization goes here.
+ * [4] Your update function goes here.
+ *
+ * Learn more about scripting: https://docs.cocos.com/creator/3.0/manual/en/scripting/
+ * Learn more about CCClass: https://docs.cocos.com/creator/3.0/manual/en/scripting/ccclass.html
+ * Learn more about life-cycle callbacks: https://docs.cocos.com/creator/3.0/manual/en/scripting/life-cycle-callbacks.html
+ */

assets/scripts/main.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "9ec2ba6a-c457-453a-a456-61e08dfc9e50",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/page.ts

@@ -0,0 +1,28 @@
+
+import { _decorator, Component, Node } from 'cc';
+import { BaseItem } from './baseItem';
+import { SuperLayout } from '../core/super-layout';
+import { BaseMain } from './baseMain';
+const { ccclass, property } = _decorator;
+
+@ccclass('Page')
+export class Page extends BaseMain {
+    @property(SuperLayout) layout!: SuperLayout
+    start() {
+        for (let i = 0; i < 8; i++) {
+            this.datas.push({
+                message: i
+            })
+        }
+        this.layout.total(this.datas.length)
+    }
+    onRefreshEvent(item: Node, index: number) {
+        item.getComponent(BaseItem)?.show(this.datas[index], index, this.onClickItem.bind(this))
+    }
+    onClickItem() {
+    }
+
+    onPageEvent(event: any) {
+        console.error(this.layout.currPageIndex)
+    }
+}

assets/scripts/page.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "b9acb047-de7c-4339-adee-64c0aa94a22a",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/refresh-load.ts

@@ -0,0 +1,92 @@
+
+import { _decorator, Node, Tween, Vec3, Label } from 'cc';
+import { BaseMain } from './baseMain';
+const { ccclass, property } = _decorator;
+
+@ccclass('RefreshLoad')
+export class RefreshLoad extends BaseMain {
+    @property(Node) header!: Node
+    @property(Node) footer!: Node
+    onLoad() {
+        this.header.setScale(new Vec3(1, 0, 1))
+        this.footer.setScale(new Vec3(1, 0, 1))
+    }
+    
+    private headerTween!: Tween<Node>
+    private footerTween!: Tween<Node>
+    onHeader(scrollView: any, event: any) {
+        if (event.progress > 2) {
+            if (!(this.header as any)['playing']) {
+                this.headerTween = new Tween(this.header!);
+                this.headerTween.to(0.518, {
+                    scale: new Vec3(1, 1, 1),
+                }, {
+                    easing: "elasticOut"
+                });
+                this.headerTween.start();
+                (this.header as any)['playing'] = true
+            }
+        } else {
+            this.headerTween?.stop();
+            (this.header as any)['playing'] = false
+            this.header.setScale(new Vec3(1, event.progress, 1))
+        }
+
+        let label = this.header.getComponentInChildren(Label)!
+        if (event.stage == "touch") {
+            label.string = "↓ 继续下拉"
+        }
+        if (event.stage == "wait") {
+            label.string = "↑ 松开刷新"
+        }
+        if (event.stage == "lock") {
+            label.string = this.datas.length == 0 ? "没有数据" : "刷新中..."
+        }
+        if (event.stage == 'release') {
+            label.string = ""
+        }
+        if (event.action) {
+            this.scheduleOnce(() => this.layout.total(this.datas.length), 1)
+        }
+    }
+    onFooter(scrollView: any, event: any) {
+        if (event.progress > 2) {
+            if (!(this.footer as any)['playing']) {
+                this.footerTween = new Tween(this.footer!);
+                this.footerTween.to(0.518, {
+                    scale: new Vec3(1, 1, 1),
+                }, {
+                    easing: "elasticOut"
+                });
+                this.footerTween.start();
+                (this.footer as any)['playing'] = true
+            }
+        } else {
+            this.footerTween?.stop();
+            (this.footer as any)['playing'] = false
+            this.footer.setScale(new Vec3(1, event.progress, 1))
+        }
+
+        let label = this.footer.getComponentInChildren(Label)!
+        if (event.stage == "touch") {
+            label.string = "↑ 继续上拉"
+        }
+        if (event.stage == "wait") {
+            label.string = "↓ 松开加载"
+        }
+        if (event.stage == "lock") {
+            label.string = "加载中..."
+        }
+        if (event.stage == 'release') {
+            label.string = ""
+        }
+        if (event.action) {
+            for (let i = 0; i < 6; i++) {
+                this.datas.push({
+                    message: `${this.datas.length}`
+                })
+            }
+            this.scheduleOnce(() => this.layout.total(this.datas.length), 1)
+        }
+    }
+}

assets/scripts/refresh-load.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "89a5c43f-a817-4468-b172-8adfec9cca6f",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/simple.ts

@@ -0,0 +1,19 @@
+
+import { _decorator, Component, Node } from 'cc';
+import { BaseMain } from './baseMain';
+const { ccclass, property } = _decorator;
+
+@ccclass('Simple')
+export class Simple extends BaseMain {
+
+    async onLoad() {
+        for (let i = 0; i < 20; i++) {
+            this.datas.push({ message: i })
+        }
+        this.layout.total(this.datas.length)
+        // 如果你是动态修改尺寸时 需要下一帧执行滚动
+        this.scheduleOnce(() => {
+            this.layout.scrollToHeader(1)
+        })
+    }
+}

assets/scripts/simple.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "5f170b85-b864-4225-90a2-1d331a3b186c",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/vertical.ts

@@ -0,0 +1,37 @@
+
+import { _decorator, Component, Node, Label, EditBox, Size } from 'cc';
+import { BaseItem } from './baseItem';
+import { SuperLayout } from '../core/super-layout';
+const { ccclass, property } = _decorator;
+@ccclass('Vertical')
+export class Vertical extends BaseItem {
+    onLoad() {
+        this.input.placeholder = this.transform?.height.toString()!
+    }
+    onInput() {
+        let height = Number(this.input.string)
+        if (isNaN(height)) return
+        if (height < 100) {
+            return
+        }
+        this.transform?.setContentSize(new Size(this.transform.contentSize.width, height))
+        this.layout.updateItemSize(this.node, this.transform?.contentSize!)
+    }
+    show(data: any, index: number, callback: Function, layout: SuperLayout) {
+        super.show(data, index, callback, layout)
+        var time = Math.random() * 2
+        // const height = Math.random() * 200 + 100
+        var scale = Math.random()
+        scale = Math.max(0.5, scale)
+        scale = Math.min(2, scale)
+        const height = index % 2 == 0 ? 100 : 150
+        const size = new Size(this.transform?.width, height)
+        // this.unscheduleAllCallbacks()
+        // this.scheduleOnce(() => {
+        //     this.transform?.setContentSize(size)
+        // }, time)
+        this.transform?.setContentSize(size)
+        layout.updateItemSize(this.node, size)
+    }
+
+}

assets/scripts/vertical.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "ea9d1b02-3661-4863-bf24-d43b44bb4c4e",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}