? ? ? ? 今天在用HBuilder X寫uniapp項(xiàng)目時(shí)遇到了需要使用滾動(dòng)視圖的地方，為了簡(jiǎn)單省事自然就選擇了srcoll-view這個(gè)標(biāo)簽。在寫完后實(shí)驗(yàn)了一下，微信小程序時(shí)沒(méi)有問(wèn)題，但是h5頁(yè)面卻出問(wèn)題了。
? ? ? ? 問(wèn)題大致分為兩類：橫向、縱向
? ? ? ? 共有的問(wèn)題有：給scroll-view加上class類名并設(shè)置彈性布局后發(fā)現(xiàn)不起作用，經(jīng)過(guò)排查和瀏覽器查看視圖結(jié)構(gòu)發(fā)現(xiàn)，h5頁(yè)面中的scroll-view標(biāo)簽內(nèi)自動(dòng)嵌套了三層uni-view結(jié)構(gòu)，如下圖：
????????因此直接給scroll-view的類名中設(shè)置彈性布局是不行的，需要寫成下面的這樣：
/* h5的scroll-view滾動(dòng)容器內(nèi)元素樣式 */
/deep/.uni-scroll-view-content{
display: flex;
flex-direction: column;
}?在設(shè)置滾動(dòng)時(shí)，需參考下圖
?
?????????橫向時(shí)需設(shè)置滾動(dòng)視圖容器的寬度，并設(shè)置white-space: nowrap;其目的是在內(nèi)部元素的總寬度超過(guò)容器時(shí)禁止換行，使其在一行上顯示。
? ? ? ? 縱向時(shí)則需要設(shè)置滾動(dòng)視圖容器的高度，不需要禁止換行。但值得注意的是在設(shè)置聚堆定位的時(shí)候（absolute和fixed）可能會(huì)造成出現(xiàn)滾動(dòng)條但是無(wú)法滾動(dòng)的，但去除絕對(duì)定位后又可以的情況。
? ? ? ? 我上網(wǎng)查詢時(shí)發(fā)現(xiàn)橫向滾動(dòng)的文章比較多，但縱向的寥寥無(wú)幾，且對(duì)縱向滾動(dòng)的解決辦法都是設(shè)置高度，但這明顯不行。后來(lái)經(jīng)過(guò)試驗(yàn)發(fā)現(xiàn)問(wèn)題所在。
? ? ? ? 由于絕對(duì)定位后視圖組件會(huì)脫離當(dāng)前的文本流，在沒(méi)有指定具體層級(jí)的情況下，導(dǎo)致滾動(dòng)元素也沒(méi)固定（個(gè)人猜想）。于是我在設(shè)定scroll-view的層級(jí)后即可保證在絕對(duì)定位的情況下還可以滾動(dòng)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-602731.html
? ? ? ? 以上是我在寫代碼的過(guò)程中遇到的問(wèn)題及解決辦法，如果有不同的看法的歡迎交流，大家一起進(jìn)步。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-602731.html
到了這里，關(guān)于關(guān)于uniapp使用srcoll-view視圖是橫向及縱向滾動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
