2. 程式人生 > >微信小程式開發實戰（1)：使用滾動檢視

微信小程式開發實戰（1)：使用滾動檢視

阿新 • • 發佈：2020-05-16
本文主要介紹了滾動檢視元件（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  滾動時輸出的日誌