cocos2d js-3.2 PageView的简单使用

叁歲伎倆 2022-08-03 00:07 179阅读 0赞

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

**\[javascript\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

[view plain]: http://blog.csdn.net/a102111/article/details/43736653#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/602781
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/602781/fork