微信小程序开发实战（1)：使用滚动视图

本文主要介绍了滚动视图组件(scroll-view)的各种常用功能，例如，垂直和水平滚动、滚动事件等，并通过例子代码来演示这些功能的使用方法。  1. 垂直滚动视图 　　scroll-view是容器组件，如果该组件的子组件超过scroll-view的高度或宽度，该组件会允许子组件在垂直或水平方向滚动视图，以便显示其他没有显示的子组件。本节主要介绍如何让scroll-view垂直滚动。 如果要让scroll-view垂直滚动，需要设置scroll-y属性值为true。例如，下面的布局代码，将scroll-view组件的高度设为200px，里面的每一个子view的高度也是200px，而且放了4个子view。这样scroll-view就允许滚动而现实其他的子view了。

<view>
       <view class="section__title">垂直滚动</view>
       <scroll-view scroll-y="true" style="height: 200px;" >
           <view id="green" class="scroll-view-item bc_green"></view>
           <view id="red"  class="scroll-view-item bc_red"></view>
           <view id="yellow" class="scroll-view-item bc_yellow"></view>
           <view id="blue" class="scroll-view-item bc_blue"></view>
       </scroll-view>
 </view>

 当上下滚动是，效果如图1所示。 图1 scroll-view垂直滚动的效果 　　 scroll-view滚动条的初始位置为0，也就是在最上端，如果要改变滚动条的默认位置，需要设置scroll-top属性，该属性默认的属性值为0，也就是滚动条在最顶端。如果该属性值不为0，滚动条会向下滚动(该属性值需大于0)。下面的布局代码设置了scroll-top属性的值是60。  

<scroll-view scroll-y="true" style="height: 200px;" scroll-top="60">
   … …
</scroll-view>

 显示效果如图2所示，很明显，在没有滚动的情况下，红色的子view显示了一部分(正好是60px)。

  图2 设置scroll-top属性的效果

  　　如果想让scroll-view一开始就滚动到某一个子视图，需要使用scroll-into-view属性，该属性