微信小程序开发实战（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属性，该属性需要指定一个子视图的id。例如，下面的布局代码设置了scroll-into-view属性的值为yellow，也就是说，当系统装载scroll-view组件时，会直接滚动到第3个子组件yellow。如果同时设置了scroll-top和scroll-into-view属性，后者的优先级更高。

<scroll-view scroll-y="true" style="height: 200px;"  bindscrolltoupper="upper" bindscrolltolower="lower"  upper-threshold="100" lower-threshold="300" bindscroll="scroll" scroll-top="100"  scroll-into-view="yellow" >
    … …
</scroll-view>

2. 水平滚动视图

如果想让scroll-view水平滚动，那么需要设置scroll-x属性为true，布局代码如下：

<view>
     <view class="section__title">水平滚动</view>
     <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
         <view id="green" class="scroll-view-item_H bc_green"></view>
         <view id="red"  class="scroll-view-item_H bc_red"></view>
         <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
         <view id="blue" class="scroll-view-item_H bc_blue"></view>
     </scroll-view>
 </view>

其中scroll-view_H样式的代码如下：

.scroll-view_H{
    white-space: nowrap;
}

显示效果如图3所示。

图3 scroll-view水平滚动的效果

如果要让滚动条默认停留在其他位置，需要设置scroll-left属性，例如，下面的布局代码将scroll-left属性的值设为50。

<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="50" style="width: 100%">
    … …
</scroll-view>

显示效果如图4所示。

图4 设置scroll-left属性的效果

 

3. 滚动到边缘触发事件

 

　　scroll-view组件提供了一些事件，其中当滚动条滚动到最上端或最下端（垂直滚动），或滚动到最左端或最右端（水平滚动），会分别触发两个事件，这两个事件分别用bindscrolltoupper和bindscrolltolower属性指定。这两个属性需要指定事件对应的函数名称。例如，下面的布局代码包含了两个scroll-view组件，上面的是垂直滚动，下面的是水平滚动。

 <view>
         <view class="section__title">垂直滚动</view>
         <scroll-view scroll-y="true" style="height: 200px;"   bindscrolltoupper="upper" bindscrolltolower="lower" >
            <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 class="section__title">水平滚动</view>
         <scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="50" style="width: 100%"
             bindscrolltoupper="upper" bindscrolltolower="lower" >
                 <view id="green" class="scroll-view-item_H bc_green"></view>
                 <view id="red"  class="scroll-view-item_H bc_red"></view>
                 <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
                 <view id="blue" class="scroll-view-item_H bc_blue"></view>
         </scroll-view>
 </view>

  在上面的布局代码中，bindscrolltoupper指定了upper方法，而bindscrolltolower指定了lower方法。这两个方法需要在index.js文件中实现，代码如下：

 var app = getApp()
 Page({
    … …
   upper: function(e) {
     console.log(e)
   },
   lower: function(e) {
     console.log(e)
   },
 })

 在这两个方法中简单地输出了参数e。当水平或垂直滑动滚动条时，系统会根据滚动条的位置触发相应的事件。例如，图5所示是垂直滚动到最低端，然后再滚动到最顶端，水平滚动先滚动到最后端，然后再滚动到最左端的输入日志。

图5 滚动到边缘的输出日志

那么，还有一个问题，系统是如何判定时候滚动到了边缘的呢？其实这是通过另外两个属性来判定的，这两个属性是upper-threshold和lower-threshold。这两个属性的默认值是50，这个值差不多是滚动条的长度。在默认情况下，当滚动条的一端刚一接触上、下、左、右边缘时就会触发相应的事件。如果要改变这两个属性的默认值，那么滚动条可能会滚动到其他的位置才会触发相应的事件。例如，下面的代码设置了upper-threshold属性的值为100，lower-threshold属性的值为300。

<scroll-view scroll-y="true" style="height: 200px;"   bindscrolltoupper="upper" bindscrolltolower="lower"  upper-threshold="100" lower-threshold="300">
    … …
</scroll-view>

对于垂直来说，在默认情况下，滚动条会处在如图6所示的位置，才会触发下边缘滚动事件。不过如果lower-threshold属性的值是300，那么滚动条会在如图7所示的位置就会触发下边缘滚动事件。

图6  lower-threshold属性为默认值时触发下边缘滚动事件的位置

图7  lower-threshold属性为300时触发下边缘滚动事件的位置

4  滚动事件

 

scroll-view除了可以监控滚动条处在边缘的事件，还可以实时监控滚动条滚动的状态，这就是滚动事件，使用bindscroll属性设置，该属性的值是滚动事件对应的函数名。例如，下面的代码设置bindscroll属性值为scroll。

<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="50" style="width: 100%"
     bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" >
         <view id="green" class="scroll-view-item_H bc_green"></view>
         <view id="red"  class="scroll-view-item_H bc_red"></view>
         <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
         <view id="blue" class="scroll-view-item_H bc_blue"></view>
 </scroll-view>

当滚动条水平或垂直滚动时，会不断触发滚动事件，并调用scroll函数，该函数的代码如下：

scroll:function(e)
{
   console.log(e.detail)
}

通过e参数中的detail属性，可以获得与滚动相关的信息。detail属性可以提供如下6个值。

• scrollLeft：水平滚动时滚动条当前的位置，在垂直滚动时该值为0。
• scrollTop：垂直滚动时滚动条当前的位置，在水平滚动时该值为0。
• scrollHeight：垂直滚动时所有子视图的总高度（包括子视图之间的间距），在水平滚动时，该值是scroll-view组件的高度。
• scrollWidth：水平滚动时所有子视图的总宽度（包括子视图之间的间距）。在垂直滚动时，该值是scroll-view组件的宽度。
• deltaX：水平滚动时的增量，也就是从当前滚动条的位置移动到新位置的距离。从左向右水平移动，该值小于0，从右向左水平移动，该值大于0。通过该属性值可以判断水平移动的方向。
• deltaY：垂直滚动时的增量，也就是从当前滚动条的位置移动到新位置的距离。从上到下垂直移动，该值小于0，从下向上垂直移动，该值大于0。通过该属性值可以判断垂直移动的方向。

图8是垂直和水平滚动时触发滚动事件输出的日志信息，其中也包含滚动到边缘输出的日志信息。

图8  滚动时输出的日志