【微信小程序】採坑之scroll-view組件

 

1、摘要

　　今天在使用scroll-view組件的時候發現結果跟預想的不同。其實也不是第一次用了，一樣的寫法卻出現了意料以外的效果，因此認定是bug了。博主使用的是2.3.0版本，因此以前的版本應該也會有這個bug。

2、正文

　　先上圖

　　這是在scroll-view中添加這麼些text組件的時候的效果，代碼我就不上了。發現文本組件莫名其妙的被擠下來了一些，我但是沒有設置上邊距的，並且留白的地方也沒有任何東西。

　　通過我苦思冥想以及各類嘗試發現把中文換成英文或者數字，結果就不同了。忘記說了，這個scroll-view設置的是x方向滑動。

　　能夠發現此次超出的部分沒有自動換行了，並且能夠左右滑動了，可是留白部分依然存在。

　　我如今的需求是須要用中文，而要能滑動。以前致使沒法滑動的緣由是因爲文本自動換行形成的。例如第三個text的「文本組件」這四個字居然被分到兩行，而後去控制檯看佈局的時候發現是這樣的。

　　厲害了，這文本組件居然變成這樣，更奇怪的是尚未影響其它兄弟組件的佈局。

　　咋整吶？抱着試一試的心態，我在scroll-view的樣式中添加了這麼一行代碼。

white-space: nowrap;

　　奇蹟出現了，看下面的效果。

　　這是我向右邊拖動了一點點的效果。相信你們也能看懂上面那行css吧，就是強制不換行的意思。我猜想官方是用div去實現這個scroll-view的，並且沒有設置這條屬性，因此默認就是自動換行了。

　　咱們再來看下下面這個scroll-view的使用。

　　你們可能跟我同樣很奇怪，爲啥這個就能夠正常滑動吶。這裏面我是沒有強制不換行的。比較一些這二者的區別就知道爲啥了。由於下面這個scroll-view中使用了圖片，圖片的寬度遠遠大於文字。並且我把圖片和文字放在了一個view中，因此整個view的寬度以圖片爲主。

3、總結

　　scroll-view中的元素大體分爲兩類，一類是中文，一類是非中文。使用中文類的組件時候（也就是須要呈現中文的組件，不限於text組件）是會自動換行的，這時候需求在css中強制不換行。在使用非中文組件時候就一切正常。

　　至於爲啥使用中文組件會有一部分留白，這個我不知道是個例仍是bug，反正只須要用相對定位移一下就能夠了。雖然這不是最好的解決方案，可是目前也沒有更好的選擇。