微信小程序開發實戰（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  滾動時輸出的日志