本文主要介紹了微信小程式組件之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-x | #Boolean | false | 允許橫向捲動 |
#scroll-y | Boolean | false | 允許縱向捲動 |
upper-threshold | Number | 50 | 在頂部/左邊多遠時(單位px),觸發scrolltoupper 事件 |
lower-threshold | Number | 50 | 在底部/右邊多遠時(單位px),觸發scrolltolower 事件 |
Number | 設定垂直捲軸位置 | ||
Number | 設定橫向捲軸位置 | ||
String | 值應為某子元素id(id不能以數字開頭)。設定哪個方向可捲動,則在哪個方向捲動到該元素 | ||
Boolean | false | #在設定捲軸位置時使用動畫過渡 | |
Boolean | false | iOS點擊頂部狀態列、安卓雙擊標題列時,捲軸回到頂部,只支援垂直 | |
EventHandle | 捲動到頂部/左邊,會觸發scrolltoupper 事件 | ||
EventHandle | ##捲動到底部/右邊,會觸發scrolltolower 事件 | ||
EventHandle | 捲動時觸發,event.detail = {scrollLeft, scrollTop, scrollHeight , scrollWidth, deltaX, deltaY} |
以上是微信小程式scroll-view組件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!