顶部弹出菜单根据scrollview实际位置设置选中的按钮

assets/scripts/main.js

@@ -49,13 +49,15 @@ cc.Class({
         topMenu: {
             default: null,
             type: cc.Node
-        }
+        },
+        partsY: []
     },
 
     // LIFE-CYCLE CALLBACKS:
 
     onLoad () {
         let self = this;
+        this.partsY = [0, 1560, 2920, 3666, 4686];
         this.mainScrollContent = cc.instantiate(this.mainScrollPrefab);
         this.scrollContent.addChild(this.mainScrollContent);
         this.mainScrollContent.getComponent('scrollContent').joinBtn.on('click', function () {
@@ -73,6 +75,8 @@ cc.Class({
             self.showTopMenu();
         });
         this.scrollView.node.on('scroll-ended', function (e) {
+            // let offsetY = self.scrollView.getScrollOffset().y;
+            // console.log('getScrollOffset: ' + offsetY);
         });
     },
 
@@ -83,6 +87,14 @@ cc.Class({
     },
     // update (dt) {},
     showTopMenu() {
+        let offsetY = this.scrollView.getScrollOffset().y;
+        let menuNo = 0;
+        for(let i = 0; i < this.partsY.length; i++) {
+            if (offsetY >= this.partsY[i]) {
+                menuNo= i;
+            }
+        }
+
         if (!this.topMenu) {
             this.topMenu = cc.instantiate(this.menuContentPrefab);
             this.node.addChild(this.topMenu, 9);
@@ -90,28 +102,13 @@ cc.Class({
         } else {
             this.topMenu.active = !this.topMenu.active ;
         }
+        this.topMenu.getComponent('topMenuContent').updateMenuShow(menuNo);
     },
 
     onTopMenuClick: function (idx) {
         console.log(idx);
-        let y = 0;
+        let y = this.partsY[idx];
-        switch (idx) {
+        this.topMenu.getComponent('topMenuContent').updateMenuShow(idx);
-            case 1:
-                y = 1560;
-                break;
-            case 2:
-                y = 2920;
-                break;
-            case 3:
-                y = 3666;
-                break;
-            case 4:
-                y = 4686;
-                break;
-            default:
-                y = 0;
-                break;
-        }
         this.scrollView.scrollToOffset(cc.v2(0, y), 0.1);
         this.topMenu.active = false;
     },

assets/scripts/topMenuBtn.js

@@ -37,4 +37,17 @@ cc.Class({
     },
 
     // update (dt) {},
+    updateStatus() {
+        let self = this;
+        let titleUrl = `textures/top_menu/menu_${this.btn_idx}`;
+        if (self.selected) {
+            titleUrl = `textures/top_menu/menu_${this.btn_idx}_s`;
+            this.bgSprite.node.active = true;
+        } else {
+            this.bgSprite.node.active = false;
+        }
+        cc.loader.loadRes(titleUrl, cc.SpriteFrame, function (err, spriteFrame) {
+            self.titleSprite.spriteFrame = spriteFrame;
+        });
+    }
 });

assets/scripts/topMenuContent.js

@@ -6,6 +6,7 @@ cc.Class({
             default: null,
             type: cc.Prefab
         },
+        btns: []
     },
 
     // LIFE-CYCLE CALLBACKS:
@@ -16,6 +17,7 @@ cc.Class({
             var btn = cc.instantiate(this.btnPrefab);
             btn.getComponent('topMenuBtn').btn_idx = i;
             btn.getComponent('topMenuBtn').selected = i === 0;
+            this.btns.push(btn);
             this.node.addChild(btn);
             let y = 400 - 120 * i;
             btn.setPosition(cc.v2(0, y));
@@ -26,4 +28,11 @@ cc.Class({
     },
 
     // update (dt) {},
+    updateMenuShow(index) {
+        for(let btn of this.btns) {
+            let comp = btn.getComponent('topMenuBtn');
+            comp.selected = comp.btn_idx === index;
+            comp.updateStatus();
+        }
+    }
 });