滚动容器

滚动属性

对组件或者列表设置了“溢出处理”为“水平滚动”、“垂直滚动”,“自由滚动”后,组件或者列表即成为滚动容器。点击“溢出处理”旁边的按钮,可以设置详细的滚动的相关属性。

ScrollPane

当组件的“溢出处理”设置为“滚动”后,可以通过GComponent.scrollPane使用滚动相关的功能,例如:

ScrollPane scrollPane =  aComponent.scrollPane;
//设置滚动位置为100像素
scrollPane.posX = 100;

//滚动到中间位置,带动画过程
scrollPane.SetPercX(0.5f, true);

当你增删子组件后,或者移动子组件的位置、调整子组件的大小,容器是自动更新滚动区域的,不需要调用任何API。这个刷新发生在本帧绘制之前。如果你希望立刻访问子元件的正确坐标,那么可以调用EnsureBoundsCorrect通知GComponent立刻重排。EnsureBoundsCorrect是一个友好的函数,你不用担心重复调用会有额外性能消耗。

ScrollPane中常用的API有:

可以侦听滚动改变,在任何情况下滚动位置改变都会触发这个事件。

//Unity/Cry
scrollPane.onScroll.Add(onScroll);

//AS3
scrollPane.addEventListener(Event.SCROLL, onScroll);

//Egret
scrollPane.addEventListener(ScrollPane.SCROLL, this.onScroll, this);

//Laya,注意是用组件侦听,不是ScrollPane
aComponent.on(fairygui.Events.SCROLL, this, this.onScroll);

//Cocos2dx,注意是用组件侦听,不是ScrollPane
aComponent->addEventListener(UIEventType::Scroll, CC_CALLBACK_1(AClass::onScroll, this));

//CocosCreator,注意使用组件侦听,不是ScrollPane
aComponent.on(fgui.Event.SCROLL, this.onScroll, this);

和滚动相关的事件还有:

//Unity/Cry
scrollPane.onScrollEnd.Add(onScrollEnd);
scrollPane.onPullDownRelease.Add(onPullDownRelease);
scrollPane.onPullUpRelease.Add(onPullUpRelease);

//AS3
scrollPane.addEventListener(ScrollPane.SCROLL_END, onScrollEnd);
scrollPane.addEventListener(ScrollPane.PULL_DOWN_RELEASE, onPullDownRelease);
scrollPane.addEventListener(ScrollPane.PULL_UP_RELEASE, onPullUpRelease);

//Egret
scrollPane.addEventListener(ScrollPane.SCROLL_END, this.onScrollEnd, this);
scrollPane.addEventListener(ScrollPane.PULL_DOWN_RELEASE, this.onPullDownRelease, this);
scrollPane.addEventListener(ScrollPane.PULL_UP_RELEASE, this.onPullUpRelease, this);

//Laya,注意是用组件侦听,不是ScrollPane
aComponent.on(fairygui.Events.SCROLL_END, this, this.onScrollEnd);
aComponent.on(fairygui.Events.PULL_DOWN_RELEASE, this, this.onPullDownRelease);
aComponent.on(fairygui.Events.PULL_UP_RELEASE, this, this.onPullUpRelease);

//Cocos2dx,注意是用组件侦听,不是ScrollPane
aComponent->addEventListener(UIEventType::ScrollEnd, CC_CALLBACK_1(AClass::onScrollEnd, this));
aComponent->addEventListener(UIEventType::PullDownRelease, CC_CALLBACK_1(AClass::onPullDownRelease, this));
aComponent->addEventListener(UIEventType::PullUpRelease, CC_CALLBACK_1(AClass::onPullUpRelease, this));

//CocosCreator,注意使用组件侦听,不是ScrollPane
scrollPane.on(fgui.Event.SCROLL_END, this.onScrollEnd, this);
scrollPane.on(fgui.Event.PULL_DOWN_RELEASE, this.onPullDownRelease, this);
scrollPane.on(fgui.Event.PULL_UP_RELEASE, this.onPullUpRelease, this);