cocos2d js scrollView

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

1.  var size = cc.winSize;  
2.     
3.  //读取json文件  
4.  var root = ccs.uiReader.widgetFromJsonFile(res.listJson);  
5. this.addChild(root);  
6. //获取在cocos studio里面设定好的scrollView  
7.  var missionlist = ccui.helper.seekWidgetByName(root, "MissionList");  
8. //设定垂直朝向滚动  
9.  missionlist.setDirection(ccui.ScrollView.DIR_VERTICAL);  
10.  missionlist.setTouchEnabled(true);  
11.  missionlist.setBounceEnabled(true);  
12.  missionlist.setVisible(true);  
13.  //设置大小  
14.  missionlist.setSize(cc.size(960, 400));   
15.  //设置可以滚动区域         
16.  var len = 9;  
17.  missionlist.setInnerContainerSize(cc.size(960, 80* len));  
18.  missionlist.y = size.height/2;  
19.  missionlist.x = size.width/2;  
20.  missionlist.setAnchorPoint(cc.p(0.5,0.5));  
21. //设置滚动的项目  
22.  for(var i = 0; i < len; i++){  
23.   var sprite = new cc.Sprite(res.item_png);  
24.   missionlist.addChild(sprite);  
25.   sprite.x = missionlist.width/2;  
26.   sprite.y = missionlist.getInnerContainerSize().height + 40 - (i+1)*80;  
27.   sprite.setAnchorPoint(cc.p(0.5,0.5));  
28.  }  
29.   missionlist.jumpToTop();  

[javascript] view plain copy

1. 第二种，手写代码  

[javascript] view plain copy

1. var listView = ccui.ScrollView.create();  
2. listView.setDirection(ccui.ScrollView.DIR_VERTICAL);  
3. listView.setTouchEnabled(true);  
4. listView.setBounceEnabled(true);  
5. listView.setSize(cc.size(960, 400));  
6. listView.x = size.width/2;  
7. listView.y = size.height/2;  
8. listView.setAnchorPoint(cc.p(0.5,0.5));  
9. this.addChild(listView);  
10. istView.setInnerContainerSize(cc.size(960, 80*9));  
11. for(var i =0; i < 9; i++){  
12.  var sprite = new cc.Sprite(res.item_png);  
13.  listView.addChild(sprite);  
14.  sprite.x= listView.width/2;  
15.  sprite.y= listView.getInnerContainerSize().height + 40 - (i+1)*80;  
16.  sprite.setAnchorPoint(cc.p(0.5,0.5));  
17. }  
18.   
19. listView.jumpToTop();  

[javascript] view plain copy

1.   

[javascript] view plain copy

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

[javascript] view plain copy

1.   

[javascript] view plain copy

1. var HelloWorldLayer = cc.Layer.extend({  
2.     sprite:null,  
3.     ctor:function () {  
4.   
5.   
6.         this._super();  
7.   
8.   
9.         var size = cc.winSize;  
10.           
11.         var listView = new ccui.ScrollView();  
12.         listView.setDirection(ccui.ScrollView.DIR_HORIZONTAL);   
13.         listView.setTouchEnabled(true);    
14.         listView.setBounceEnabled(true);   
15.         listView.setSize(cc.size(512, 200));    
16.         listView.x = size.width/2;    
17.         listView.y = size.height/2;  
18.         listView.setAnchorPoint(cc.p(0.5,0.5));    
19.         this.addChild(listView);  
20.         listView.setInnerContainerSize(cc.size(128*6, 200));  
21.         for(var i =0; i < 6; i++){    
22.         <span style="white-space:pre">    </span>var sprite = new cc.Sprite(res.item_png);    
23.         <span style="white-space:pre">    </span>listView.addChild(sprite);  
24.         <span style="white-space:pre">    </span>  
25.         <span style="white-space:pre">    </span>sprite.x= i*130 + 40;  
26.         <span style="white-space:pre">    </span>sprite.y= listView.getInnerContainerSize().height/2;    
27.         <span style="white-space:pre">    </span>sprite.setAnchorPoint(cc.p(0.5,0.5));  
28.         }    
29.   
30.   
31.         listView.jumpToLeft();    
32.         cc.log("ben guo...");  
33.         return true;  
34.     }  
35. });  
36.   
37.   
38. var HelloWorldScene = cc.Scene.extend({  
39.     onEnter:function () {  
40.         this._super();  
41.         var layer = new HelloWorldLayer();  
42.         this.addChild(layer);  
43.     }  
44. });