修改页面布局

assets/components/Page.ts

@@ -0,0 +1,11 @@
+const {ccclass, property} = cc._decorator;
+
+@ccclass
+export default class Page extends cc.Component {
+    @property({type: cc.String})
+    pageName: string = ''
+
+    start () {
+
+    }
+}

assets/components/Page.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "3b1ab7fa-f2e6-42e4-851d-98bfd2f6b009",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

assets/components/card/Card.ts

@@ -1,11 +1,26 @@
 const {ccclass, property} = cc._decorator;
 
+export interface ICardData {
+  price: number
+  name: string
+  portrait: string
+}
+
 @ccclass
 export default class Card extends cc.Component {
-// @property({ type: cc.Node })
-// snode: cc.Node = null
+
+    @property({type: cc.Sprite})
+    mainImg: cc.Sprite = null
+    @property({type: cc.Sprite})
+    nameImg: cc.Sprite = null
+    @property({type: cc.Label})
+    priceLabel: cc.Label = null
 
     start () {
 
     }
+
+    init(data: ICardData) {
+      console.log('card init with data: ', data)
+    }
 }

assets/components/footer.meta

@@ -1,6 +1,6 @@
 {
   "ver": "1.1.2",
-  "uuid": "3df24160-761c-49c8-8207-cb2cdbd168d0",
+  "uuid": "623bee19-d24c-443d-9b80-d19cbdc6a993",
   "isBundle": false,
   "bundleName": "",
   "priority": 1,

assets/components/header.meta

@@ -0,0 +1,12 @@
+{
+  "ver": "1.1.2",
+  "uuid": "35675772-6a5e-453b-b01e-44592f0ba641",
+  "isBundle": false,
+  "bundleName": "",
+  "priority": 1,
+  "compressionType": {},
+  "optimizeHotUpdate": {},
+  "inlineSpriteFrames": {},
+  "isRemoteBundle": {},
+  "subMetas": {}
+}

assets/components/header/TopBtn.ts

@@ -1,3 +1,6 @@
+import { TOP_BTN_CHANGE } from '../../scripts/JCEvent'
+import Page from '../Page'
+
 const {ccclass, property} = cc._decorator;
 
 @ccclass
@@ -17,6 +20,9 @@ export default class TopBtn extends cc.Component {
     needChange: boolean = true
     private selected = false
 
+    @property(cc.String)
+    pageName: string = ''
+
 
     start () {
         // this.node.on('click', this.onClick, this)
@@ -41,7 +47,7 @@ export default class TopBtn extends cc.Component {
             return
         }
         this.setSelect(true)
-        cc.zevent.emit('top_btn_change', this.index)
+        cc.zevent.emit(TOP_BTN_CHANGE, this.pageName)
     }
 
 }

assets/components/header/TopMenu.ts

@@ -1,11 +1,10 @@
-import TopBtn from '../top_btn/TopBtn'
+import TopBtn from './TopBtn'
+import { TOP_BTN_CHANGE } from '../../scripts/JCEvent'
 
 const {ccclass, property} = cc._decorator;
 
 @ccclass
 export default class TopMenu extends cc.Component {
-// @property({ type: cc.Node })
-// snode: cc.Node = null
 
     @property({type: cc.Node})
     container: cc.Node = null
@@ -16,9 +15,9 @@ export default class TopMenu extends cc.Component {
     start () {
        // this.initBtns()
         this.btns[0].setSelect(true)
-        cc.zevent.on('top_btn_change', (index: number) => {
+        cc.zevent.on(TOP_BTN_CHANGE, (pageName: string) => {
             for (let i = 0, l = this.btns.length; i < l; i++) {
-                if (index !== i) {
+                if (pageName !== this.btns[i].pageName) {
                     this.btns[i].setSelect(false)
                 }
             }

assets/components/header/header.prefab.meta

@@ -0,0 +1,8 @@
+{
+  "ver": "1.2.9",
+  "uuid": "22f839be-6f25-4956-bd01-dfcd391f95e1",
+  "optimizationPolicy": "AUTO",
+  "asyncLoadAssets": false,
+  "readonly": false,
+  "subMetas": {}
+}

assets/components/p1/Page1.ts

@@ -1,11 +1,9 @@
+import Page from '../Page'
+
 const {ccclass, property} = cc._decorator;
 
 @ccclass
-export default class Page1 extends cc.Component {
-// @property({ type: cc.Node })
-// snode: cc.Node = null
-
-
+export default class Page1 extends Page {
 
     start () {
 

assets/components/p1/p1.prefab

@@ -1269,6 +1269,7 @@
       "__id__": 1
     },
     "_enabled": true,
+    "pageName": "home",
     "_id": ""
   },
   {

assets/components/p2/Page2.ts

@@ -0,0 +1,16 @@
+import { PAGE_ON_SHOW } from '../../scripts/JCEvent'
+import Page from '../Page'
+
+const {ccclass, property} = cc._decorator;
+
+@ccclass
+export default class Page2 extends Page {
+
+  start () {
+    cc.zevent.on(PAGE_ON_SHOW, (index: number) => {
+      if (index === 4) {
+
+      }
+    })
+  }
+}

assets/components/p2/Page2.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "59d92a0d-a51a-4e6d-83ed-6e4cc4751f85",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

assets/components/p2/p2.prefab

@@ -34,10 +34,13 @@
     "_components": [
       {
         "__id__": 27
+      },
+      {
+        "__id__": 28
       }
     ],
     "_prefab": {
-      "__id__": 28
+      "__id__": 29
     },
     "_opacity": 255,
     "_color": {
@@ -1017,6 +1020,17 @@
     "_atlas": null,
     "_id": ""
   },
+  {
+    "__type__": "59d92oNpRpObYPtbkzEdR+F",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "pageName": "gameplay",
+    "_id": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {

assets/components/p3/Page3.ts

@@ -1,7 +1,9 @@
+import Page from '../Page'
+
 const {ccclass, property} = cc._decorator;
 
 @ccclass
-export default class Page3 extends cc.Component {
+export default class Page3 extends Page {
     @property({ type: cc.PageView })
     pageView: cc.PageView = null
 

assets/components/p3/p3.prefab

@@ -1593,6 +1593,7 @@
       "__id__": 1
     },
     "_enabled": true,
+    "pageName": "nft",
     "pageView": {
       "__id__": 29
     },

assets/components/p4/Page4.ts

@@ -0,0 +1,16 @@
+import { PAGE_ON_SHOW } from '../../scripts/JCEvent'
+import Page from '../Page'
+
+const {ccclass, property} = cc._decorator;
+
+@ccclass
+export default class Page4 extends Page {
+
+  start () {
+    cc.zevent.on(PAGE_ON_SHOW, (index: number) => {
+      if (index === 4) {
+
+      }
+    })
+  }
+}

assets/components/p4/Page4.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "d1e3a6a1-718d-445e-b469-387fc35199ab",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

assets/components/p4/p4.prefab

@@ -43,10 +43,13 @@
     "_components": [
       {
         "__id__": 35
+      },
+      {
+        "__id__": 36
       }
     ],
     "_prefab": {
-      "__id__": 36
+      "__id__": 37
     },
     "_opacity": 255,
     "_color": {
@@ -1320,6 +1323,17 @@
     "_atlas": null,
     "_id": ""
   },
+  {
+    "__type__": "d1e3aahcY1EXrRpOH/DUZmr",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "pageName": "chip",
+    "_id": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {

assets/resources.meta

@@ -1,9 +1,9 @@
 {
   "ver": "1.1.2",
   "uuid": "2eebd6cf-e464-4158-b356-87fdfd217e78",
-  "isBundle": false,
-  "bundleName": "",
-  "priority": 1,
+  "isBundle": true,
+  "bundleName": "resources",
+  "priority": 8,
   "compressionType": {},
   "optimizeHotUpdate": {},
   "inlineSpriteFrames": {},

assets/scripts/JCEvent.ts

@@ -1,3 +1,12 @@
+/**
+ * top menu button on clicked
+ */
+export const TOP_BTN_CHANGE = 'top_btn_change'
+/**
+ * part page on show
+ */
+export const PAGE_ON_SHOW = 'page_on_show'
+
 let createNanoEvents = () => ({
   events: {},
   emit (event, ...args) {

assets/scripts/scene/main.ts

@@ -1,10 +1,10 @@
+import { PAGE_ON_SHOW, TOP_BTN_CHANGE } from '../JCEvent'
+
 const {ccclass, property} = cc._decorator;
 import('../JCEvent')
 
 @ccclass
-export default class NewClass extends cc.Component {
-// @property({ type: cc.Node })
-// snode: cc.Node = null
+export default class MainClass extends cc.Component {
     @property({type: [cc.Node]})
     pages: cc.Node[] = []
     @property({type: cc.Node})
@@ -13,7 +13,11 @@ export default class NewClass extends cc.Component {
     private isScrolling = false
 
     start () {
-        cc.zevent.on('top_btn_change', (index: number) => {
+        cc.zevent.on(TOP_BTN_CHANGE, (pageName: string) => {
+            let index = this.pages.findIndex(o => {
+                let comp = o.getComponent('Page')
+                return comp?.pageName === pageName
+            })
             this.showPage(index)
         })
         this.node.on(cc.Node.EventType.MOUSE_WHEEL, this.mouseScroll, this)
@@ -30,12 +34,13 @@ export default class NewClass extends cc.Component {
         let self = this
         this.isScrolling = true
         const pageSize = 1037
-        let y = index < 1 ? pageSize * index : pageSize * (index - 1)
+        let y = pageSize * index
         cc.tween(this.content)
           .to(1, {position: cc.v3(0, y, 0)}, { easing: 'sineOut'})
           .call(() => {
               self.isScrolling = false
               self.currentPage = index
+              cc.zevent.emit(PAGE_ON_SHOW, index)
           })
           .start()
     }