微信小程式 採坑之scroll view元件

2022-08-28 10:39:13 字數 1324 閱讀 6950

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

先上圖

這是在scroll-view中新增這麼些text元件的時候的效果,**我就不上了。發現文字元件莫名其妙的被擠下來了一些,我可是沒有設定上邊距的,而且留白的地方也沒有任何東西。

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

可以發現這次超出的部分沒有自動換行了,而且可以左右滑動了,但是留白部分依然存在。

我現在的需求是需要用中文,而要能滑動。之前導致無法滑動的原因是由於文字自動換行造成的。例如第三個text的「文字元件」這四個字竟然被分到兩行,然後去控制台看布局的時候發現是這樣的。

厲害了,這文字元件竟然變成這樣,更奇怪的是還沒有影響其它兄弟元件的布局。

咋整吶?抱著試一試的心態,我在scroll-view的樣式中新增了這麼一行**。

white-space: nowrap;
奇蹟出現了,看下面的效果。

這是我向右邊拖動了一點點的效果。相信大家也能看懂上面那行css吧,就是強制不換行的意思。我猜測官方是用div去實現這個scroll-view的,而且沒有設定這條屬性,所以預設就是自動換行了。

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

大家可能跟我一樣很奇怪,為啥這個就可以正常滑動吶。這裡面我是沒有強制不換行的。比較一些這兩者的區別就知道為啥了。因為下面這個scroll-view中使用了,的寬度遠遠大於文字。而且我把和文字放在了乙個view中,所以整個view的寬度以為主。

scroll-view中的元素大致分為兩類,一類是中文,一類是非中文。使用中文類的元件時候(也就是需要呈現中文的元件,不限於text元件)是會自動換行的,這時候需求在css中強制不換行。在使用非中文元件時候就一切正常。

至於為啥使用中文元件會有一部分留白,這個我不知道是個例還是bug,反正只需要用相對定位移一下就可以了。雖然這不是最好的解決方案,但是目前也沒有更好的選擇。

微信小程式採坑記

1.的樣式大小設定,小程式跟web有點不同的地方是高度必須設定,當只設定width時,高度不會按比例縮放。要按比例,則在標籤上加個屬性 mode widthfix class banner images tab pic.png mode widthfix 2.表單繫結資料跟vue相比,有點不方便,小...

微信小程式 分享頁面做登入攔截採坑記錄

一 上面是分享頁面 用變數儲存需要跳轉的頁面路徑。分享路徑直接跳轉到登入頁,將需要跳轉的路徑以引數形式帶到登入頁,注意需要用encodeurlcomponent 轉義 let url encodeuricomponent statisticalele statisticalele?id this.d...

微信小程式踩坑記之input

好久沒有寫過部落格了,感覺生疏了,其實是變懶了。背景說明 不是初期開發者,是後來進來公司維護和新加功能的 好了,好像廢話太多了,正式開始bindblur getimgcode 先貼 view class form group input type text value name imagevalue...