1.在编辑器里面编辑好滚动容器,命名为“ScrollView”;在编辑器里面编辑好滚动条,命名为“Slider”;是由于滚动容器不显示内置滚动条的缘故,我们只能自己去做一个;
2.代码里面加载滚动容器和滚动条,并添对应加侦听事件:
this.ScrollView = ccui.helper.seekWidgetByName(layer.node, "ScrollView");
this.ScrollView .addEventListener(this.onScrollViewEvent,this);
this.SlidView = ccui.helper.seekWidgetByName(layer.node, "slidView");
this.SlidView.addEventListener(this.onSlidViewEvent,this);
3.实现用滚动容器的位置去设置滚动条,用滚动条的位置去设置滚动容器目前滚动的坐标:
onScrollViewEvent:function(sender,type){
switch (type) {
case ccui.ScrollView.EVENT_SCROLLING :
var percent = -sender.getInnerContainer().y / (sender.getInnerContainer().height - sender.height) * 100;
this.SlidView.setPercent(percent);
}
break;
default:
break;
}
},
onSlidViewEvent:function(sender, type) {
if (type != ccui.Slider.EVENT_PERCENT_CHANGED)
return ;
var percent = sender.getPercent();
var tempHei = this.ScrollView.getInnerContainer().height - this.ScrollView.height;
var tempPercent = - ( percent * tempHei / 100 );
this.ScrollView.getInnerContainer().y = tempPercent;
},