创建完scrollview后,可以看到节点树结构如下:
根节点下有两个组件:
Sprite:定制scrollview背景色
ScrollView:
Horizontal:是否开启水平滚动
Vertical:是否开启垂直滚动
Inertia:是否开启滚动惯性
Brake:滚动惯性,0为没有惯性,1为一直滚动下去、
Elastic:滚动到达底部时候会不会超出边界,实现回弹
Bounce Duration:回弹返回的时间
Scroll Event:滚动事件
孩子节点:scrollBar是滚动条
孩子节点:view是可视化范围
view下的mask:超过这个范围就不显示
view下的content:每项数据的定制
content上面加一个layout可以方面编辑内容
尝试在scrollview上添加东西:
制作一个prefab
脚本挂载到scrollview上:
@property(cc.Prefab)
item: cc.Prefab ;
start () {
var content = this.node.getComponent(cc.ScrollView).content;
//var content = this.node.getChildrenByName('content');
for(let i =0;i<10;i++){
let tmp = cc.instantiate(this.item);
tmp.setParent(content);
//content.addChild(tmp);
}
}
效果:
一些scrollview方法及使用:
this.node.getComponent(cc.ScrollView).scrollTo(cc.v2(0,0.5), 1);
//在一秒内在垂直方向上滚动50%
this.node.getComponent(cc.ScrollView).scrollToBottomRight(1);
//在一秒内滚动到视图右下角
this.node.getComponent(cc.ScrollView).scrollToBottom(5);
//在五秒内滚动到底部
this.node.getComponent(cc.ScrollView).scrollToTop(5);
//在5秒内滚动到顶部
this.node.getComponent(cc.ScrollView).stopAutoScroll;
//停止滚动