通过setContentSize制定CCScrollView的大小，当然这是可有可无的，其实并不是指定CCScrollView的大小，而是指定其容器的大小，一般我们都会在给容器添加数据的时候，再调整容器的大小；设置视图的可见范围就必不可少了，setViewSize方法为我们提供了设置视图大小，设置视图大小便指定了可见范围，setClippingToBounds方法设置剪切，如果不设置，可见范围的设置便成了虚设，通过setBounceable方法指定视图滚动过程中是否能够滚动，为了让CCScrollView显得不那么僵硬，一般会设置为true；同时我们要设置滚动的方向setDirection，有3个方向，水平、竖直、双向，setDelegate(this)指定注册为自身。通过以上代码我们便创建了一个完整的CCScrollView。

为了实现滚动，还要为其添加滚动监听事件，也就是写个方法把其绑定到CCScrollView的滚动事件上，例如：

1 @H_403_13@

self.scrollView:registerScriptHandler(scrollView2DidScroll,CCScrollView.kScrollViewScroll) @H_403_13@ @H_403_13@

@H_403_13@ @H_403_13@

这一行代码就把方法scrollView2DidScroll绑定到了CCScrollView.kScrollViewScroll事件上，要做什么处理工作便在scrollView2DidScroll方法中添加，比如我们要实现分页，或滚动时实现一个item的滚动，如下：

10 @H_403_13@

11 @H_403_13@

12 @H_403_13@

13 @H_403_13@

14 @H_403_13@

15 @H_403_13@

16 @H_403_13@

17 @H_403_13@

18 @H_403_13@

19 @H_403_13@

20 @H_403_13@

localfunctionscrollView2DidScroll() @H_403_13@ self.bolTouchEnd== localoffy=self.layerContainer:getPositionY() @H_403_13@ localminy=self.scrollHeight-self.cellNums*self.cellHeight @H_403_13@ offy<0andoffy>minythen @H_403_13@ localitem=-(math. abs (offy)%self.cellHeight) @H_403_13@ item<=-self.cellHeight/2then @H_403_13@ offy<self.preOffythen @H_403_13@ item=offy-item-self.cellHeight @H_403_13@ else @H_403_13@ item=offy-item-self.cellHeight @H_403_13@ end @H_403_13@ else @H_403_13@ item=offy-item @H_403_13@ end @H_403_13@ self.scrollView:setContentOffset(ccp(1,item), ) @H_403_13@ end @H_403_13@ end @H_403_13@ 顺便提一下，一些全局变量的定义在这里： 5 @H_403_13@ self.scrollTop=208 @H_403_13@ self.scrollHeight=208 @H_403_13@ self.scrollWidth=152 @H_403_13@ self.cellHeight=52 @H_403_13@ self.cellNums=2 @H_403_13@ @H_403_13@ @H_403_13@ @H_403_13@ 至于什么意思，看到命名字段应该还是浅显易懂的，就不一一解释了，其中self.preOffy是记录上一次CCScrollView的偏移量。分页也很简单，首先假定我们的ScrollView的偏移量都是负值，确实也是负值。由于CCScrollView会自动纠正第一项和最后一项的位置，所以在第一项和最后一项时我们不做处理，让CCScrollView的内部方法去实现。如果CCScrollView的偏移量对一个item取余数，如果余数大于item的一半我们就分页，否则就归位。代码if offy < self.preOffy then是为了判定滚动方向是上还是下（我的这个CCScrollView的设置方向是竖直的），好了到此为止我们的完整的带分页的CCScrollView就实现了。 现在要对其添加数据，方便起见我又创建了一个类名称为LLScrollItem，实现一个item的类，并为其添加了一个ON_TOUCH_EVENT的事件，完整代码如下： 20 @H_403_13@ 21 @H_403_13@ 22 @H_403_13@ 23 @H_403_13@ 24 @H_403_13@ 25 @H_403_13@ 26 @H_403_13@ @H_902_403@ 27 @H_403_13@ 28 @H_403_13@ 29 @H_403_13@ 30 @H_403_13@ 31 @H_403_13@ 32 @H_403_13@ 33 @H_403_13@ 34 @H_403_13@ 35 @H_403_13@ 36 @H_403_13@ 37 @H_403_13@ 38 @H_403_13@ 39 @H_403_13@ 40 @H_403_13@ localLLScrollItem= class ( "LLScrollItem" ,function() @H_403_13@ display.newNode() @H_403_13@ end) @H_403_13@ LLScrollItem.ON_TOUCH_EVENT= "on_touch_event" @H_403_13@ functionLLScrollItem:ctor(params) @H_403_13@ cc(self):addComponent( "components.behavior.EventProtocol" ):exportMethods() @H_403_13@ self.text=params.text @H_403_13@ locallabel=ui.newTTFLabel({ @H_403_13@ text=params.text, @H_403_13@ font= "Arial" 403_13@ size=20, @H_403_13@ }) @H_403_13@ label:setTouchEnabled( ) @H_403_13@ label:addNodeEventListener(cc.NODE_TOUCH_EVENT,function(event) @H_403_13@ self:onTouch(event) @H_403_13@ end) @H_403_13@ localrect={ @H_403_13@ {0,0}, @H_403_13@ {150, @H_403_13@ 403_13@ 403_13@ 403_13@ } @H_403_13@ localr,g,b,s=math.random(0,255),math.random(0,255) @H_403_13@ locallayerColor=display.newColorLayer(ccc4(r,s)):addTo(self) @H_403_13@ 403_13@ layerColor:setContentSize(CCSizeMake(150,52)) @H_403_13@ localpolygon=display.newPolygon(rect,1):addTo(layerColor) @H_403_13@ 403_13@ polygon:setLineWidth(1) @H_403_13@ polygon:setLineColor(ccc4f(255,255)) @H_403_13@ label:addTo(polygon) @H_403_13@ label:align(display.CENTER,75,26) @H_403_13@ label:setColor(ccc3(255-r,255-g,255-b)) @H_403_13@ end @H_403_13@ functionLLScrollItem:onTouch(event) @H_403_13@ self:dispatchEvent({name=LLScrollItem.ON_TOUCH_EVENT,text=self.text}) @H_403_13@ end @H_403_13@ @H_403_13@ LLScrollItem @H_403_13@ @H_403_13@ @H_403_13@ @H_403_13@ 每一个item是一个有范围界定有色层，并用一个Box包裹，并添加了一个独一的文本，用来以后区别我们点击了哪个item。 利用上面的item类我们就可以为CCScrollView添加数据了： 10 @H_403_13@ for i=1,self.cellNums do @H_403_13@ self.scrollTop=self.scrollTop-self.cellHeight @H_403_13@ localcell=LLScrollItem. new ({text= "ScrollItem:" ..i}):addTo(self.widgetContainer) @H_403_13@ 403_13@ @H_403_13@ cc.EventProxy. (cell,cell) @H_403_13@ :addEventListener(cell.ON_TOUCH_EVENT,function(event) @H_403_13@ self.label:setString(event.text) @H_403_13@ end) @H_403_13@ 因为容器内容变化了，所以要改变其大小，以便能够完全承载所有数据；设置容器的位置是容器能够达到的最低点，容器的孩子self.widgetContainer，其实是一个真正的承载数据的节点，我们在这里要设置其能够达到的最高高度。 我们之所以要给容器添加一个子节点，并所有数据都添加到其子节点上，是为应对动态增删其数据内容的情况，并使CCScrollView的显示正常。 我们再创建两个控件，一个Label一个Button： self.label=ui.newTTFLabel({ @H_403_13@ text= "Hello,World" 403_13@ 403_13@ color=ccc3(163,140,14), @H_403_13@ align=ui.TEXT_ALIGN_CENTER @H_403_13@ }) @H_403_13@ :pos(display.cx+100,display.cy+100) @H_403_13@ :addTo(self) @H_403_13@ self.button=cc.ui.UIPushButton. ({ @H_403_13@ disabled= "nil" normal= "res/GreenScale9Block.png" pressed= "res/PinkScale9Block.png" 403_13@ }) @H_403_13@ :align(display.CENTER,display.cx+100,display.cy-100) @H_403_13@ :addTo(self) @H_403_13@ :onButtonClicked( @H_403_13@ function() @H_403_13@ self:addItem() @H_403_13@ end @H_403_13@ ) @H_403_13@ @H_403_13@ @H_403_13@ @H_403_13@ 这个Label就是上面所说的self.label，此Button是为了实现动态添加数据的功能，点击Button就为CCScrollView添加数据，我们把其相应事件绑定到了addItem方法，此方法实现为： 23 @H_403_13@ functionLLScrollView:addItem() @H_403_13@ self.cellNums=self.cellNums+1 @H_403_13@ ..self.cellNums}):addTo(self.widgetContainer) @H_403_13@ 403_13@ @H_403_13@ 403_13@ 403_13@ self.label:setString(event.text) @H_403_13@ end) @H_403_13@ @H_403_13@ localh=self.cellNums*self.cellHeight @H_403_13@ h<self.scrollHeightthen @H_403_13@ h=self.scrollHeight @H_403_13@ end @H_403_13@ self.layerContainer:setContentSize(CCSizeMake(self.scrollWidth,h)) @H_403_13@ self.widgetContainer:setPositionY(h-self.scrollHeight) @H_403_13@ self.layerContainer:setPositionY(self.scrollHeight-h) @H_403_13@ self.preOffy=self.layerContainer:getPositionY() @H_403_13@ localh1=self.scrollHeight-h @H_403_13@ h1<0thenh1=0end @H_403_13@ self.layerContainer:setPositionY(h1) @H_403_13@ 同样的，在添加完数据之后，一定要调整容器及其子节点的位置及大小，否则显示出问题。到此位置我们已经实现了一个完整的能够实现分页、动态添加数据的CCScrollView，至于动态删除，仿照动态添加自然也就出来了。 上一篇：Cocos2d-x 3.0final 终结者系列教程下一篇：menuItem类 猜你在找的Cocos2d-x相关文章 创建自定义的Cocos2d-x场景 操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE... 作者：前端之家 时间：2021-01-27 给vs2010安装上cocos2d-x的模版 开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，... 作者：前端之家 时间：2021-01-27 Python创建Cocos2d-x 2.2方法 把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-... 作者：前端之家 时间：2021-01-27 cocos2dx 物理碰撞 https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics... 作者：前端之家 时间：2020-08-06 cocos2d-js 自定义事件监听派发 转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的... 作者：前端之家 时间：2020-08-06 cocos常用 实用 公共函数 lua代码 公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加... 作者：前端之家 时间：2020-08-06 cocos creator box2d title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g... 作者：前端之家 时间：2020-08-06 （转）让quick-cocos2d-x支持加密的plist文件 前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现... 作者：前端之家 时间：2020-08-06 （转）quick-cocos2d-x图片资源加密(续) 摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加... 作者：前端之家 时间：2020-08-06 Cocos Creator 动态改变sprite图片 首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url... 作者：前端之家 时间：2020-08-06 编程分类 iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova 最新文章 • 创建自定义的Cocos2d-x场景 • 给vs2010安装上cocos2d-x的 • Python创建Cocos2d-x 2.2方 • cocos2dx 物理碰撞 • cocos2d-js 自定义事件监听 • cocos2dx 分帧加载 • cocos常用 实用 公共函数 • cocos creator box2d • （转）让quick-cocos2d-x支 • （转）quick-cocos2d-x图片 热门标签 更多 ► 调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签