首页 > 代码库 > cocos2d js ScrollView的使用方法
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); } });
cocos2d js ScrollView的使用方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。