此系列内容来源于Cocos的
官方视频链接
腾讯视频
哔哩哔哩 — Cocos 官方。
我们现在开始结合前面的属性设置，实现一个滚动列表Scrollview的Demo
ScrollView(滚动视图)介绍
scrollview是由一系列的组件组合而成
红色的锁表示不可移动、旋转等
其主要内容就是content。所有需要滚动的视图都添加在content上。
实操1: 自定义scrollBar
当我们新建了scrollview之后，发现只有纵向的滚动条，如果要实现横向的滚动条
如果需要横向滚动，需要先开启横向滚动的开关。
cocos有一个非常人性化的地方就是。所有属性都有详细的解释。需要了解属性的含义，只需要点击右边的帮助文档，所有内容清清楚楚。
1、将一张图放到资源管理器中
2、从资源管理，将背景图拖到层级管理器，其层级应该和content平级
3、更改这个节点的渲染模式Type 为SLICED（九宫格），关于type的详细介绍可以点击右上角的帮助文档。
因为这个图可能会随着屏幕的宽度而变化，我们需要设置其拉升模式。
拉伸区域是指：绿色点中间的区域将会被拉伸，外面的部分会保持原样。比如这个背景图的左右2边是半圆形，如果整张图被拉伸，那么这个半圆将会变形。
4、更改这个背景图资源的拉伸区域并保存
5、设置好之后，需要将此控件添加scrollbar属性---选中层级管理器中刚才添加的拖进去的图。在右侧的属性检查器中 添加组件-UI组件-scrollbar,取保scrollbar的Direction是HORIZONTAL
6、添加一个指示实际进度的控件
拖一张图到层级管理器中ScrollBar之下。和上面添加背景一样，设置其type为“SLICED”（九宫格）并对其进行编辑。改变拉伸区域。
7、将刚才加的用于指示进度的控件长按拖入到ScrollBar的handler属性中，以完成数据绑定。
8、将上面完成了的scrollBar拖到scrollview的Horizontal Scroll Bar中完成数据绑定
此时，适当调整Scrollview中congtent的size，使其宽高大于scrollview的size。运行，就能看到。刚才自定义的横向scrollbar正常工作了。
实操2: 自定义一个数据列表
1、对scrollview样式进行配置
我们结合之前学习的内容实现一个列表功能
1、创建一个layout组件，
调整其锚点的位置，以左上角为锚点(0.5,1)。这样的话，才能在确保无论有多少数据， 上边始终是在scrollview的固定位置
type：纵向排列
Resize Mode：CONTAINER
因为列表长度未知，我们需要让layout自动适应到最底部的那个列表Item。
2、在Layout中添加组件：
拖动一张背景图作为一个列表数据的背景
type：SLICED（九宫格）
Sprite Frame： 编辑其图片的拉伸区域
3、 在此背景上添加一个lable
Horizontal Align ： Left。文本左对齐
Overflow：CLAMP，让内容根据我们指定的label大小显示，多的不展示
Enable Wrap Text：取消换行
添加Weiget：左：10 居中：0，调整size大小
4、在此背景上添加一个图片
添加Weiget：right：10 居中：0，调整size大小
5、选中list_bg,用快捷键com+D,快速复制一个，此时看到layout自动变高了
6、新建一个scrollview，并适当调整其size，Wedigt等
将view层级下的content删掉，将上面创建的layout拖到view层级下。
选中scrollview，将我们拖过来的layout拖到属性检查器中的content。
最终的样式大概如下：
运行起来，ok，能正常滚动。
