cocos2d js 3.2PageView的简单使用

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

var PageViewScene = cc.Scene.extend({
	pageView : null,
	pageIdx : 0,
	onEnter:function () {
		this._super();

		var winSize = cc.winSize;

//		var sprBg = new cc.Sprite(res.PageBg_png);
//		sprBg.attr({
//		x : winSize.width/2,
//		y : winSize.height/2
//		});
//		this.addChild(sprBg);

		// ccui系列与cc系列基本通用
		var img = new ccui.ImageView();
		img.loadTexture(res.PageBg_png);
		img.attr({
			x : winSize.width/2,
			y : winSize.height/2
		});
//		img.x = winSize.width/2;
//		img.y = winSize.height/2;
		this.addChild(img);

		// 页面 
		this.pageView = new ccui.PageView();
		this.pageView.setTouchEnabled(true);
		this.pageView.setContentSize(winSize.width, winSize.height);
//		this.pageView.x = winSize.width/2;
//		this.pageView.y = winSize.height/2;

		for (var i = 0; i < 3; i++) {
			// 组织pageview
			var layout = new ccui.Layout();
			layout.setContentSize(winSize.width, winSize.height);
			var layoutRect = layout.getContentSize();

			var img = new ccui.ImageView();
			img.loadTexture("res/page/boss_0"+(i+1)+"_normal.png");
//			img.setContentSize(layoutRect.width, layoutRect.height);
			img.x = layoutRect.width/2;
			img.y = layoutRect.height/2;
			layout.addChild(img);

			// 设置layout的位置===无效设置
//			layout.x = winSize.width/2;
//			layout.y = winSize.height/2;

			// 加入到pageview
			this.pageView.addPage(layout);
		}

		this.pageView.addEventListener(this.pageViewEvent, this);

		this.addChild(this.pageView);
		
		// 加入按键时间监听 对于本层
		cc.eventManager.addListener({
			event : cc.EventListener.KEYBOARD,			// 按键监听
			onKeyPressed : this.onKeyPressed,
			onKeyReleased : this.onKeyReleased
		}, this);
	},
	pageViewEvent: function (sender, type) {
		switch (type) {
		case ccui.PageView.EVENT_TURNING:
			var pageView = sender;
			cc.log("page:" + pageView.getCurPageIndex());
			break;
		default:
			break;
		}
	},
	onKeyPressed : function(key, event) {
		// android设备上  引擎可能貌似无法处理按下操作
	},
	onKeyReleased : function(key, event) {
		// 所有逻辑在弹起时做
		cc.log("key:" + key);
		switch (key) {
		// android TV: 左:159  右:160 上:161 下:162 OK:163 MENU:18  BACK:6
		case TagOfKeyTv.Left:	// 上  android:161 win32:28
			event.getCurrentTarget().pageIdx++;
			event.getCurrentTarget().pageView.scrollToPage(event.getCurrentTarget().pageIdx);
			break;
		case TagOfKeyTv.Right:
			event.getCurrentTarget().pageIdx--;
			event.getCurrentTarget().pageView.scrollToPage(event.getCurrentTarget().pageIdx);
			break;

		default:
			break;
		}
	}
});

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

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




你可能感兴趣的:(cocos2d js 3.2PageView的简单使用)