cocos2d js scrollView

来源：互联网发布：重庆时时彩遗漏数据编辑：程序博客网时间：2024/06/16 13:36

var scrollView = new ccui.ScrollView();    //设置方向    scrollView.setDirection(ccui.ScrollView.DIR_VERTICAL);    //触摸的属性    scrollView.setTouchEnabled(true);    //弹回的属性    // scrollView.setBounceEnabled(true);    //滑动的惯性    scrollView.setInertiaScrollEnabled(true);    scrollView.setBackGroundImageScale9Enabled(true);    //设置背景    scrollView.setBackGroundImage(res.Bghong_jpg);    //设置scrollview的大小，相当于是显示的区域    scrollView.setContentSize(cc.size(640, 1140));    //设置容器的大小 这个容器就是存放scrollview添加的节点，需要设置他的位置，上面已经讲清楚    scrollView.setInnerContainerSize(cc.size( 640,6840));    //可以添加触摸事件监听器    scrollView.addTouchEventListener(this.scrollviewCall,this)    //锚点默认是 （0,0）    scrollView.setAnchorPoint(0,0)    scrollView.x = 0    scrollView.y = 0    //自己新建一个节点    this._Node.addChild(scrollView);    //layer的锚点默认是(0,0),现在设置ImageView    var imageBg = new ccui.ImageView(res.liuheyi_jpg);    imageBg.setAnchorPoint(0,0);    imageBg.setPosition(0,0);    scrollView.addChild(imageBg,1);    //添加按钮层    var  buttonlayer = new ButtonLayer();    buttonlayer.setPosition(0,0);    buttonlayer.setContentSize(cc.size(600,6840))    scrollView.addChild(buttonlayer,3)

游戏中很多需要用到ScrollView的情况，也就是需要滚动一片区域。这里有两种实现方法，一种是使用cocos studio的方式，第二种是手写代码。先看第一种

第一种记得在设置滚动区域时选取裁剪项。

[javascript] view plain copy

var size = cc.winSize;
//读取json文件
var root = ccs.uiReader.widgetFromJsonFile(res.listJson);
this.addChild(root);
//获取在cocos studio里面设定好的scrollView
var missionlist = ccui.helper.seekWidgetByName(root, "MissionList");
//设定垂直朝向滚动
missionlist.setDirection(ccui.ScrollView.DIR_VERTICAL);
missionlist.setTouchEnabled(true);
missionlist.setBounceEnabled(true);
missionlist.setVisible(true);
//设置大小
missionlist.setSize(cc.size(960, 400));
//设置可以滚动区域
var len = 9;
missionlist.setInnerContainerSize(cc.size(960, 80* len));
missionlist.y = size.height/2;
missionlist.x = size.width/2;
missionlist.setAnchorPoint(cc.p(0.5,0.5));
//设置滚动的项目
for(var i = 0; i < len; i++){
var sprite = new cc.Sprite(res.item_png);
missionlist.addChild(sprite);
sprite.x = missionlist.width/2;
sprite.y = missionlist.getInnerContainerSize().height + 40 - (i+1)*80;
sprite.setAnchorPoint(cc.p(0.5,0.5));
}
missionlist.jumpToTop();

[javascript] view plain copy

第二种，手写代码

[javascript] view plain copy

var listView = ccui.ScrollView.create();
listView.setDirection(ccui.ScrollView.DIR_VERTICAL);
listView.setTouchEnabled(true);
listView.setBounceEnabled(true);
listView.setSize(cc.size(960, 400));
listView.x = size.width/2;
listView.y = size.height/2;
listView.setAnchorPoint(cc.p(0.5,0.5));
this.addChild(listView);
istView.setInnerContainerSize(cc.size(960, 80*9));
for(var i =0; i < 9; i++){
var sprite = new cc.Sprite(res.item_png);
listView.addChild(sprite);
sprite.x= listView.width/2;
sprite.y= listView.getInnerContainerSize().height + 40 - (i+1)*80;
sprite.setAnchorPoint(cc.p(0.5,0.5));
}
listView.jumpToTop();

[javascript] view plain copy

下面是左右滑动的代码示例

[javascript] view plain copy

var HelloWorldLayer = cc.Layer.extend({
sprite:null,
ctor:function () {
this._super();
var size = cc.winSize;
var listView = new ccui.ScrollView();
listView.setDirection(ccui.ScrollView.DIR_HORIZONTAL);
listView.setTouchEnabled(true);
listView.setBounceEnabled(true);
listView.setSize(cc.size(512, 200));
listView.x = size.width/2;
listView.y = size.height/2;
listView.setAnchorPoint(cc.p(0.5,0.5));
this.addChild(listView);
listView.setInnerContainerSize(cc.size(128*6, 200));
for(var i =0; i < 6; i++){
var sprite = new cc.Sprite(res.item_png);
listView.addChild(sprite);
sprite.x= i*130 + 40;
sprite.y= listView.getInnerContainerSize().height/2;
sprite.setAnchorPoint(cc.p(0.5,0.5));
}
listView.jumpToLeft();
cc.log("ben guo...");
return true;
}
});
var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new HelloWorldLayer();
this.addChild(layer);
}
});

0 0