这节课来了解一下scroll view组件的基本使用。希望使用这个组件来实现如图一个纵向滚动的效果，外面这个红框，是一个有高度的一个容器，然后里面有三个子元素，分别是ABC，然后咱们通过鼠标，这里往上托的话这里面的这三个元素会进行上下的滚动。这个效果实现的话，其实非常的简单。总共有三个步骤，可以直接基于刚才的效果来进行修改，第一步需要将最外层包裹性质的容器，从view组件给他改造成scroll-view这个组件，然后第二步咱们需要给这个组件加一个属性，纵向上进行滚动。注意如果允许纵向滚动的话，需要加一个scroll-y这么一个属性，如果是横向滚动，就是scroll-x。
为了能够实现纵向滚动的效果，还必须给这个scroll view组件加一个固定的高度，于是咱们通过这个样式的形式给它加了一个固定的高度，是120个像素。为了更加的清晰咱们又加了一个边框线，同时大家也限定了一下自己的宽度。接下来基于刚才的代码去做一下改造，大家看刚才外面包裹性的容器是一个普通的view，里面是没有办法实现这种滚动效果的，接下来可以把包裹性质的这个容器，从view改造成scroll-view，开始标签修改之后咱们的结束标签也需要做一下修改，同时咱们为了开启这种纵向滚动的效果。
元素进行纵向的滚动还需要给外面这个包裹性的容器加一个强制性的高度才可以。打开样式表，清空让他，加一个边框线，咱们先来看一下这个外面这个容器，来1px solid red。
这时候发现这个红色的边框线，就变得只有100个像素了，但是这个还是没有这个滚动的效果对，还需要加一个限定的高度，才能够实现纵向的滚动，来家一个高度height来个120PX来保存。
鼠标放上去，你发现外面这个容器就能够让里面的内容进行滚动了。在一些电商的移动端项目里面，经常会有一个左侧的滚动列表效果，其实就可以基于scroll view这个组件来进行实现，实现的过程总共有三步，第一步，要把外面包裹性质这个容器，改成scroll view这个组件。第二部如果是纵向滚动的话，要加一个滚动方向属性，如果是横向滚动就是加一个属性是scroll-x。还需要给他去限定一个高度，于是我们可以通过样式的形式给它加了一个强制性的高度，就代表说我的高度只有120，然后里面的内容如果超出我的区域，就会在纵向上来进行这种滚动。
