這篇文章給大家分享的是有關(guān)微信小程序中srcoll-view組件有什么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)公司是一家專業(yè)從事成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)站設(shè)計公司,創(chuàng)新互聯(lián)公司依托的技術(shù)實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設(shè)、成都營銷網(wǎng)站建設(shè)及網(wǎng)站設(shè)計開發(fā)服務(wù)！
微信小程序組件之srcoll-view的詳解
首先展示一下想達到的效果?！?vertical scroll實現(xiàn)上下滾動，horizontal實現(xiàn)左右滾動。
先附上wxml的代碼。
vertical scroll
horizontal scroll
1.整個界面由一個view包裝起來，該view的class為創(chuàng)建quickStart時自帶,可根據(jù)需要自己調(diào)整。之后，兩個view各包裝一個scrollview及其上面的text文本。
2.第一個scroll-view需豎直滾動，為其設(shè)置scroll-y="{{true}}"(或者直接寫scroll-y)。該scrollview的class為“scroll-view-y”，之后會附上代碼。scroll-top屬性設(shè)置滾動條的初始位置，scrollTop在js文件的data中聲明賦值（不需要可去掉）。
3.scrollview中四個不用顏色的view，除顏色外其他屬性相同。
為豎直scrollview的wxss代碼
.scroll-view-y {
height: 200px;
width: 100%;
}
.scroll-y-item {
height: 70px;
width: 100%;
}4.水平方向的scrollview與豎直方向基本類似，著重說一下區(qū)別。
(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設(shè)置為flex彈性伸縮顯示，overflow設(shè)置當子布局超出父容器時scroll展示。
②顏色塊display屬性設(shè)置為 inline-table，這個很重要！?。∽铋_始沒有寫這個屬性，很久都無法實現(xiàn)scrollview的水平滑動。在我不斷的嘗試下，終于試出來了，很開心！吐舌頭
附上微信官方屬性說明↓
| 屬性名 | 類型 | 默認值 | 說明 | | scroll-x | Boolean | false | 允許橫向滾動 |
| scroll-y | Boolean | false | 允許縱向滾動 |
| upper-threshold | Number | 50 | 距頂部/左邊多遠時（單位px），觸發(fā) scrolltoupper 事件 |
| lower-threshold | Number | 50 | 距底部/右邊多遠時（單位px），觸發(fā) scrolltolower 事件 |
| scroll-top | Number | | 設(shè)置豎向滾動條位置 |
| scroll-left | Number | | 設(shè)置橫向滾動條位置 |
| scroll-into-view | String | | 值應(yīng)為某子元素id（id不能以數(shù)字開頭）。設(shè)置哪個方向可滾動，則在哪個方向滾動到該元素 |
| scroll-with-animation | Boolean | false | 在設(shè)置滾動條位置時使用動畫過渡 |
| enable-back-to-top | Boolean | false | iOS點擊頂部狀態(tài)欄、安卓雙擊標題欄時，滾動條返回頂部，只支持豎向 |
| bindscrolltoupper | EventHandle | | 滾動到頂部/左邊，會觸發(fā) scrolltoupper 事件 |
| bindscrolltolower | EventHandle | | 滾動到底部/右邊，會觸發(fā) scrolltolower 事件 |
| bindscroll | EventHandle | | 滾動時觸發(fā)，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
感謝各位的閱讀！關(guān)于“微信小程序中srcoll-view組件有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
本文名稱：微信小程序中srcoll-view組件有什么用
本文鏈接：
http://weahome.cn/article/iichoj.html
重慶分公司
重慶分公司
