這篇文章主要講解了“微信小程序中的srcoll-view組件怎么用”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“微信小程序中的srcoll-view組件怎么用”吧!
成都創(chuàng)新互聯(lián)主營固原網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā),固原h(huán)5小程序定制開發(fā)搭建,固原網(wǎng)站營銷推廣歡迎固原等地區(qū)企業(yè)咨詢微信小程序組件之srcoll-view的詳解
首先展示一下想達(dá)到的效果?!?vertical scroll實(shí)現(xiàn)上下滾動(dòng),horizontal實(shí)現(xiàn)左右滾動(dòng)。
先附上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.整個(gè)界面由一個(gè)view包裝起來,該view的class為創(chuàng)建quickStart時(shí)自帶,可根據(jù)需要自己調(diào)整。之后,兩個(gè)view各包裝一個(gè)scrollview及其上面的text文本。
2.第一個(gè)scroll-view需豎直滾動(dòng),為其設(shè)置scroll-y="{{true}}"(或者直接寫scroll-y)。該scrollview的class為“scroll-view-y”,之后會(huì)附上代碼。scroll-top屬性設(shè)置滾動(dòng)條的初始位置,scrollTop在js文件的data中聲明賦值(不需要可去掉)。
3.scrollview中四個(gè)不用顏色的view,除顏色外其他屬性相同。
為豎直scrollview的wxss代碼
.scroll-view-y { height: 200px; width: 100%; } .scroll-y-item { height: 70px; width: 100%; }
4.水平方向的scrollview與豎直方向基本類似,著重說一下區(qū)別。
(1) 豎直方向的scrollview直接包住4個(gè)不同顏色的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; }
可以看到:
①水平滑塊多了兩個(gè)屬性,display和overflow。display設(shè)置為flex彈性伸縮顯示,overflow設(shè)置當(dāng)子布局超出父容器時(shí)scroll展示。
②顏色塊display屬性設(shè)置為 inline-table,這個(gè)很重要?。?!最開始沒有寫這個(gè)屬性,很久都無法實(shí)現(xiàn)scrollview的水平滑動(dòng)。在我不斷的嘗試下,終于試出來了,很開心!吐舌頭
附上微信官方屬性說明↓
屬性名 | 類型 | 默認(rèn)值 | 說明 |
---|---|---|---|
scroll-x | Boolean | false | 允許橫向滾動(dòng) |
scroll-y | Boolean | false | 允許縱向滾動(dòng) |
upper-threshold | Number | 50 | 距頂部/左邊多遠(yuǎn)時(shí)(單位px),觸發(fā) scrolltoupper 事件 |
lower-threshold | Number | 50 | 距底部/右邊多遠(yuǎn)時(shí)(單位px),觸發(fā) scrolltolower 事件 |
scroll-top | Number | 設(shè)置豎向滾動(dòng)條位置 | |
scroll-left | Number | 設(shè)置橫向滾動(dòng)條位置 | |
scroll-into-view | String | 值應(yīng)為某子元素id(id不能以數(shù)字開頭)。設(shè)置哪個(gè)方向可滾動(dòng),則在哪個(gè)方向滾動(dòng)到該元素 | |
scroll-with-animation | Boolean | false | 在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫過渡 |
enable-back-to-top | Boolean | false | iOS點(diǎn)擊頂部狀態(tài)欄、安卓雙擊標(biāo)題欄時(shí),滾動(dòng)條返回頂部,只支持豎向 |
bindscrolltoupper | EventHandle | 滾動(dòng)到頂部/左邊,會(huì)觸發(fā) scrolltoupper 事件 | |
bindscrolltolower | EventHandle | 滾動(dòng)到底部/右邊,會(huì)觸發(fā) scrolltolower 事件 | |
bindscroll | EventHandle | 滾動(dòng)時(shí)觸發(fā),event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
感謝各位的閱讀,以上就是“微信小程序中的srcoll-view組件怎么用”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)微信小程序中的srcoll-view組件怎么用這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
網(wǎng)頁標(biāo)題:微信小程序中的srcoll-view組件怎么用-創(chuàng)新互聯(lián)
當(dāng)前路徑:http://bm7419.com/article18/hdcgp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、域名注冊(cè)、云服務(wù)器、微信小程序、用戶體驗(yàn)、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容