cocos2d js ScrollView的使用方法

遊戲中很是多需要用到ScrollView的狀況，也就是需要滾動一片區域。

這裏有兩種實現方法，一種是使用cocos studio的方式，另一種是手寫代碼。先看第一種

第一種記得在設置滾動區域時選取裁剪項。

        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();

另一種。手寫代碼

        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);
       listView.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();

如下是左右滑動的代碼演示樣例

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++){  
        <span style="white-space:pre">	</span>var sprite = new cc.Sprite(res.item_png);  
        <span style="white-space:pre">	</span>listView.addChild(sprite);
        <span style="white-space:pre">	</span>
        <span style="white-space:pre">	</span>sprite.x= i*130 + 40;
        <span style="white-space:pre">	</span>sprite.y= listView.getInnerContainerSize().height/2;  
        <span style="white-space:pre">	</span>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);
    }
});