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

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

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

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