微信小程序中的srcoll-view組件怎么用

蝸牛 互聯網技術資訊 2022-04-12 125 0

這篇文章主要講解了“微信小程序中的srcoll-view組件怎么用”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“微信小程序中的srcoll-view組件怎么用”吧!

微信小程序組件之srcoll-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"?>?
???<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 事件
scroll-top Number
設置豎向滾動條位置
scroll-left Number
設置橫向滾動條位置
scroll-into-view String
值應為某子元素id(id不能以數字開頭)。設置哪個方向可滾動,則在哪個方向滾動到該元素
scroll-with-animation Boolean false 在設置滾動條位置時使用動畫過渡
enable-back-to-top Boolean false iOS點擊頂部狀態欄、安卓雙擊標題欄時,滾動條返回頂部,只支持豎向
bindscrolltoupper EventHandle
滾動到頂部/左邊,會觸發 scrolltoupper 事件
bindscrolltolower EventHandle
滾動到底部/右邊,會觸發 scrolltolower 事件
bindscroll EventHandle
滾動時觸發,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

感謝各位的閱讀,以上就是“微信小程序中的srcoll-view組件怎么用”的內容了,經過本文的學習后,相信大家對微信小程序中的srcoll-view組件怎么用這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是蝸牛博客,小編將為大家推送更多相關知識點的文章,歡迎關注!

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看