微信小程序基础基础图文教程：可滚动的视图区域组件（滚动条）
我们今天来讲一个可滚动的视图区域组件。
可滚动的视图区域组件是什么？
简单来说，就是当窗口面积不大的时候，可以通过滚动看到更多的内容。
这个就有点类似新闻类小程序的功能了。具体是什么大家也能想得到。
scroll-view组件的scroll-y和scroll-x属性：竖着拖动和横着拖动
老规矩，我们先打开微信小程序开发者文档看一下这个组件的一些属性。
?
scroll组件
在开始的之前，我们先新建一个项目，同样的，把wxss和wxml的内容清除一下，这些内容对我们现在来说还没什么用处。
?
第一步，我们先搞点代码上去，输入这个 ? 第二步，给out设置样式，样式给个宽度为100%，高度为200像素，背景颜色为浅灰色。 ? 第三步，给里面的box设置样式，设置个宽为100像素，高为100像素，背景颜色随便挑个好看的就行。 ? 做到这一步大家有没有发现，这个页面上的内容是无法拖动的，这个时候我们可以在 大家有没有看到，已经可以拖动了。 ? 那么该如何让这里面的这些数字横向排放呢？ 这里可以在样式里面添加下列代码：display：inline-block ? 那么，该如何把他们放在一行里面呢？这个时候我们需要在.out样式里面的高度限制删掉，添加一个white-space：nowrap即可。 这个时候我们可以看到，样式改变了，变成一行排布的了，不换行了，看起来也好看多了。 ? 不过，现在的无法拖动的，这是因为我们没有换，我们需要将 这个时候就可以自由拖动了。 ? 我们可以在这一块块里面加上一些间隔。添加间隔为5像素。 ? 这两个需要联系整个小程序的框架来说，在这里先不跟大家说了，这两个属性的作用是一种效果，当我们拖动的时候回触发的事件，这个以后有时间的话再慢慢跟大家说。 这两个属性是设置滚动条位置的，我们有的时候在小程序里面看到的默认位置在中间的，基本上都是这个属性实现的，我们现在来看看这两个属性。 大家可以看到，当我们输入scroll-left="260"代码后，按住Ctrl+s进行保存， 页面上显示的滚动条滚动的位置就放到了中间（我没动手）。 ? scroll-top是竖向的设置，实现出来的效果都差不多，详细的我们以后会再说的。 这个就是实现滚动条的一个动画过渡的效果，大家有兴趣可以自己去尝试一下，这里小编也想给大家瞧瞧，但是不太好搞，把代码给大家。 ? 这里面还有很多的属性我们还没有讲到，这里的很多属性都用不太多，上面讲的几个是比较重要的几点用法，其他的以后有时间会慢慢说的。参考代码：
参考wxss样式代码：
.out{
width: 100%;
background: #ccc;
height:200px;
}
参考代码：（注意，.out和.box之间要留点空格）
.out .box{
width: 100px;
height: 100px;
background: greenyellow;
}
参考代码：
参考样式代码：
.out .box{
width: 100px;
height: 100px;
background: greenyellow;
display: inline-block;
}
.out部分参考代码：
.out{
width: 100%;
background: #ccc;
white-space: nowrap;
}
参考代码：
参考代码：
.out .box{
width: 100px;
height: 100px;
background: greenyellow;
display: inline-block;
margin-right: 5px;
}
参考代码：
参考代码：
……