微信小程式scroll-view組件詳解-小程式開發-PHP中文網

微信小程式scroll-view組件詳解

小云云

發布： 2018-05-18 17:05:03

原創

17522 人瀏覽過

本文主要介紹了微信小程式組件之scroll-view的詳解的相關資料,希望透過本文能幫助到大家，讓大家理解掌握這部分內容，需要的朋友可以參考下，希望能幫助到大家。

微信小程式組件之srcoll-view的詳解

今天記錄scroll-view學習中遇到的問題及解決方法，希望能對其他同學有所幫助。

先展示一下想達到的效果。 ↓ vertical scroll實現上下滾動，horizontal實現左右滾動。

先附上wxml的程式碼。

<view class="container"> 
 <view> 
  <text>vertical scroll</text> 
  <scroll-view scroll-y class="scroll-view-y" scroll-top="{{scrollTop}}"> 
   <view id="green" class="scroll-y-item bg_green"></view> 
   <view id="red" class="scroll-y-item bg_red"></view> 
   <view id="blue" class="scroll-y-item bg_blue"></view> 
   <view id="yellow" class="scroll-y-item bg_yellow"></view> 
  </scroll-view> 
 </view> 
 
 <view> 
  <text>horizontal scroll</text> 
  <scroll-view scroll-x class="scroll-view-x" style="width:100%"> 
   <view class="scroll-view-x"> 
    <view class="scroll-x-item bg_green"></view> 
    <view class="scroll-x-item bg_red"></view> 
    <view class="scroll-x-item bg_blue"></view> 
    <view class="scroll-x-item bg_yellow"></view> 
   </view> 
  </scroll-view> 
 </view> 
</view>

登入後複製

1.整個介面由一個view包裝起來，該view的class為創建quickStart時自帶,可根據需要自己調整。之後，兩個view各包裝一個scrollview及其上面的text文字。

2.第一個scroll-view需垂直滾動，為其設定scroll-y="{{true}}"(或直接寫入scroll-y)。該scrollview的class為“scroll-view-y”，之後會附上程式碼。 scroll-top屬性設定捲軸的初始位置，scrollTop在js檔案的data中宣告賦值（不需要可去掉）。

3.scrollview中四個不用顏色的view，除顏色外其他屬性相同。

為垂直scrollview的wxss程式碼

.scroll-view-y { 
 height: 200px; 
 width: 100%; 
} 
 
.scroll-y-item { 
 height: 70px; 
 width: 100%; 
}

登入後複製

4.水平方向的scrollview與垂直方向基本類似，著重說一下差異。

(1) 垂直方向的scrollview直接包住4個不同顏色的view，水平方向需要先用view包住各色塊，這是為了確保各色塊水平排布。

(2) wxss檔

為水平scrollview的wxss程式碼，scroll-view-x為水平滑桿的屬性，scroll-x-item為水平滑桿中各色塊的屬性。

.scroll-view-x { 
 width: 300px; 
 height: 100px; 
 display: flex; 
 overflow: scroll; 
} 
 
.scroll-x-item { 
 width: 95px; 
 height: 100%; 
 display: inline-table; 
}

登入後複製

可以看到：

①水平滑桿多了兩個屬性，display和overflow。 display設定為flex彈性伸縮顯示，overflow設定當子佈局超出父容器時scroll展示。

②色塊display屬性設定為 inline-table，這個很重要！！！最開始沒有寫這個屬性，很久都無法實現scrollview的水平滑動。在我不斷的嘗試下，終於試出來了，很開心！吐舌頭

附上微信官方屬性說明↓

##scroll-top Number 設定垂直捲軸位置scroll-leftNumber 設定橫向捲軸位置scroll-into-viewString 值應為某子元素id（id不能以數字開頭）。設定哪個方向可捲動，則在哪個方向捲動到該元素scroll-with-animationBooleanfalse #在設定捲軸位置時使用動畫過渡enable-back-to-topBooleanfalseiOS點擊頂部狀態列、安卓雙擊標題列時，捲軸回到頂部，只支援垂直bindscrolltoupperEventHandle 捲動到頂部/左邊，會觸發scrolltoupper 事件bindscrolltolowerEventHandle ##捲動到底部/右邊，會觸發scrolltolower 事件bindscrollEventHandle 捲動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight , scrollWidth, deltaX, deltaY}

#屬性名稱	型別	預設值	說明
scroll-x	#Boolean	false	允許橫向捲動
#scroll-y	Boolean	false	允許縱向捲動
upper-threshold	Number	50	在頂部/左邊多遠時（單位px），觸發scrolltoupper 事件
lower-threshold	Number	50	在底部/右邊多遠時（單位px），觸發scrolltolower 事件