cocos2d js-3.2 PageView的简单使用

PageView在GUITest中可以看到相关的示例代码，简单的使用代码如下：

[javascript]  view plain copy

1. var PageViewScene = cc.Scene.extend({  
2.     pageView : null,  
3.     pageIdx : 0,  
4.     onEnter:function () {  
5.         this._super();  
6.         var winSize = cc.winSize;  
7. //      var sprBg = new cc.Sprite(res.PageBg_png);  
8. //      sprBg.attr({  
9. //      x : winSize.width/2,  
10. //      y : winSize.height/2  
11. //      });  
12. //      this.addChild(sprBg);  
13.         // ccui系列与cc系列基本通用  
14.         var img = new ccui.ImageView();  
15.         img.loadTexture(res.PageBg_png);  
16.         img.attr({  
17.             x : winSize.width/2,  
18.             y : winSize.height/2  
19.         });  
20. //      img.x = winSize.width/2;  
21. //      img.y = winSize.height/2;  
22.         this.addChild(img);  
23.         // 页面   
24.         this.pageView = new ccui.PageView();  
25.         this.pageView.setTouchEnabled(true);  
26.         this.pageView.setContentSize(winSize.width, winSize.height);  
27. //      this.pageView.x = winSize.width/2;  
28. //      this.pageView.y = winSize.height/2;  
29.         for (var i = 0; i < 3; i++) {  
30.             // 组织pageview  
31.             var layout = new ccui.Layout();  
32.             layout.setContentSize(winSize.width, winSize.height);  
33.             var layoutRect = layout.getContentSize();  
34.             var img = new ccui.ImageView();  
35.             img.loadTexture("res/page/boss_0"+(i+1)+"_normal.png");  
36. //          img.setContentSize(layoutRect.width, layoutRect.height);  
37.             img.x = layoutRect.width/2;  
38.             img.y = layoutRect.height/2;  
39.             layout.addChild(img);  
40.             // 设置layout的位置===无效设置  
41. //          layout.x = winSize.width/2;  
42. //          layout.y = winSize.height/2;  
43.             // 加入到pageview  
44.             this.pageView.addPage(layout);  
45.         }  
46.         this.pageView.addEventListener(this.pageViewEvent, this);  
47.         this.addChild(this.pageView);  
48.         // 加入按键时间监听 对于本层  
49.         cc.eventManager.addListener({  
50.             event : cc.EventListener.KEYBOARD,          // 按键监听  
51.             onKeyPressed : this.onKeyPressed,  
52.             onKeyReleased : this.onKeyReleased  
53.         }, this);  
54.     },  
55.     pageViewEvent: function (sender, type) {  
56.         switch (type) {  
57.         case ccui.PageView.EVENT_TURNING:  
58.             var pageView = sender;  
59.             cc.log("page:" + pageView.getCurPageIndex());  
60.             break;  
61.         default:  
62.             break;  
63.         }  
64.     },  
65.     onKeyPressed : function(key, event) {  
66.         // android设备上  引擎可能貌似无法处理按下操作  
67.     },  
68.     onKeyReleased : function(key, event) {  
69.         // 所有逻辑在弹起时做  
70.         cc.log("key:" + key);  
71.         switch (key) {  
72.         // android TV: 左:159  右:160 上:161 下:162 OK:163 MENU:18  BACK:6  
73.         case TagOfKeyTv.Left:   // 上  android:161 win32:28  
74.             event.getCurrentTarget().pageIdx++;  
75.             event.getCurrentTarget().pageView.scrollToPage(event.getCurrentTarget().pageIdx);  
76.             break;  
77.         case TagOfKeyTv.Right:  
78.             event.getCurrentTarget().pageIdx--;  
79.             event.getCurrentTarget().pageView.scrollToPage(event.getCurrentTarget().pageIdx);  
80.             break;  
81.         default:  
82.             break;  
83.         }  
84.     }  
85. });  

里面加入了按键的相关处理，不需要的可以直接无视。

注意cc系列和ccui系列是互相通用的。

源引：http://blog.csdn.net/a102111/article/details/43736653