cocos creator scrollview使用

最新推荐文章于 2024-07-18 09:57:48 发布

frankxixu

最新推荐文章于 2024-07-18 09:57:48 发布

阅读量2.4k

点赞数

分类专栏：手游开发微信，网络pa cho

本文链接：https://blog.csdn.net/frankxixu/article/details/104995806

版权

本文详细介绍了在 Cocos Creator 中如何使用 ScrollView，包括通过代码和UI组件添加，事件监听，以及实现分页滑动效果。通过示例代码展示了如何创建、配置和响应 ScrollView 的滚动事件，以及在滚动到底部和顶部时动态更新内容。

摘要由CSDN通过智能技术生成

1、选择canvas,在右侧属性中，添加UI组件- scrollview

2、代码中定位：

var sv = this.node.getComponent(cc.ScrollView)

3、添加滚动时间

callback: function (scrollview, eventType, customEventData) {
//这里 scrollview 是一个 Scrollview 组件对象实例
//这里的 eventType === cc.ScrollView.EventType enum 里面的值
//这里的 customEventData 参数就等于你之前设置的 "foobar"
console.log(customEventData);
},
onLoad () {

cc.debug.setDisplayStats(false);
console.log("challenge onload")

var scrollViewEventHandler = new cc.Component.EventHandler();
scrollViewEventHandler.target = this.node; //这个 node 节点是你的事件处理代码组件所属的节点
scrollViewEventHandler.component = "Challenge";//这个是脚本文件名
scrollViewEventHandler.handler = "callback";
scrollViewEventHandler.customEventData = "foobar";
var sv = this.node.getComponent(cc.ScrollView)
sv.scrollEvents.push(scrollViewEventHandler);

}

4、几种添加scrollview的方式：

//纯代码方式添加到Canvas-myNode节点
var bg = new cc.Node()
var bgSp = bg.addComponent(cc.Sprite)
var frame = new cc.SpriteFrame(cc.url.raw('resources/bg.png'));
bgSp.spriteFrame = frame
bgSp.sizeMode = 'CUSTOM'
bg.width = this._screenWidth
bg.height = this._screenHeight
bg.position = cc.p(0,0)
bg.parent = this.node

var myNode = new cc.Node()
myNode.width = 200
myNode.height = 400//比content的范围要小
myNode.position = cc.p(0,0)
myNode.parent = this.node
var scrollViewEventHandler = new cc.Component.EventHandler();
scrollViewEventHandler.target = this.node; //这个 node 节点是你的事件处理代码组件所属的节点
scrollViewEventHandler.component = "Test";//这个是脚本文件名
scrollViewEventHandler.handler = "callback";
scrollViewEventHandler.customEventData = "foobar";
var sv = myNode.addComponent(cc.ScrollView)
console.log("sv:")
console.log(sv.name)
sv.scrollEvents.push(scrollViewEventHandler);
sv.content = bg
//sv.horizontal = false

/*
//UI组件界面方式添加到Canvas-myNode节点
var bg = new cc.Node()
var bgSp = bg.addComponent(cc.Sprite)
var frame = new cc.SpriteFrame(cc.url.raw('resources/bg.png'));
bgSp.spriteFrame = frame
bgSp.sizeMode = 'CUSTOM'
bg.width = this._screenWidth
bg.height = this._screenHeight
bg.position = cc.p(0,0)
bg.parent = this.node

var myNode = this.node.getChildByName('myNode')
console.log(myNode.name)
myNode.width = 200
myNode.height = 400//比content的范围要小
var scrollViewEv