成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

張憲坤 / 2393人閱讀

摘要：使用中文類的組件時候也就是需要呈現(xiàn)中文的組件，不限于組件是會自動換行的，這時候需求在中強(qiáng)制不換行。在使用非中文組件時候就一切正常。至于為啥使用中文組件會有一部分留白，這個我不知道是個例還是，反正只需要用相對定位移一下就可以了。

?

一、摘要

　　今天在使用scroll-view組件的時候發(fā)現(xiàn)結(jié)果跟預(yù)想的不一樣。其實(shí)也不是第一次用了，同樣的寫法卻出現(xiàn)了意料之外的效果，所以認(rèn)定是bug了。博主使用的是2.3.0版本，所以之前的版本應(yīng)該也會有這個bug。

二、正文

　　先上圖

　　這是在scroll-view中添加這么些text組件的時候的效果，代碼我就不上了。發(fā)現(xiàn)文本組件莫名其妙的被擠下來了一些，我可是沒有設(shè)置上邊距的，而且留白的地方也沒有任何東西。

　　經(jīng)過我苦思冥想以及各種嘗試發(fā)現(xiàn)把中文換成英文或者數(shù)字，結(jié)果就不一樣了。忘記說了，這個scroll-view設(shè)置的是x方向滑動。

　　可以發(fā)現(xiàn)這次超出的部分沒有自動換行了，而且可以左右滑動了，但是留白部分依然存在。

　　我現(xiàn)在的需求是需要用中文，而要能滑動。之前導(dǎo)致無法滑動的原因是由于文本自動換行造成的。例如第三個text的“文本組件”這四個字竟然被分到兩行，然后去控制臺看布局的時候發(fā)現(xiàn)是這樣的。

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

　　咋整吶？抱著試一試的心態(tài)，我在scroll-view的樣式中添加了這么一行代碼。

white-space: nowrap;

　　奇跡出現(xiàn)了，看下面的效果。

　　這是我向右邊拖動了一點(diǎn)點(diǎn)的效果。相信大家也能看懂上面那行css吧，就是強(qiáng)制不換行的意思。我猜測官方是用div去實(shí)現(xiàn)這個scroll-view的，而且沒有設(shè)置這條屬性，所以默認(rèn)就是自動換行了。

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

　　大家可能跟我一樣很奇怪，為啥這個就可以正常滑動吶。這里面我是沒有強(qiáng)制不換行的。比較一些這兩者的區(qū)別就知道為啥了。因?yàn)橄旅孢@個scroll-view中使用了圖片，圖片的寬度遠(yuǎn)遠(yuǎn)大于文字。而且我把圖片和文字放在了一個view中，所以整個view的寬度以圖片為主。

三、總結(jié)

　　scroll-view中的元素大致分為兩類，一類是中文，一類是非中文。使用中文類的組件時候（也就是需要呈現(xiàn)中文的組件，不限于text組件）是會自動換行的，這時候需求在css中強(qiáng)制不換行。在使用非中文組件時候就一切正常。

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

?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1798.html

相關(guān)文章

  • 小程序采坑記

    摘要：小程序采坑記上手小程序兩個月，多多少少遇到一些坑，在此簡單地作下總結(jié)。但一些人可能會遇過這種情況已知小程序組件默認(rèn)高度，如果子元素高度過高，不會自適應(yīng)高度。但實(shí)際上真是這樣嗎其實(shí)小程序的組件表現(xiàn)挺奇怪的。擅長微信小程序開發(fā)，系統(tǒng)管理后臺。 小程序采坑記 上手小程序兩個月，多多少少遇到一些坑，在此簡單地作下總結(jié)。希望能對那些跟我一樣有遇到過同樣問題的人提供一點(diǎn)幫助，避免掉進(jìn)這些坑，少走一...

    miya 評論0 收藏0

  • 微信小程序的坑之wx.miniProgram.postMessage

    摘要：也就是只有在小程序后退組件銷毀分享時才會觸發(fā)所以應(yīng)該改變的時機(jī)，調(diào)換順序就可以了獲取成功這樣再試試，發(fā)現(xiàn)能正常捕獲消息了 工作中有個需求是小程序的網(wǎng)頁在關(guān)閉的時候，需要回傳給小程序一個參數(shù) 查閱小程序官方文檔，有這樣一個接口 wx.miniProgram.postMessage ，可以用來從網(wǎng)頁向小程序發(fā)送消息，然后通過 bindmessage 事件來監(jiān)聽消息，如下是官方文檔描述 sh...

    sorra 評論0 收藏0

  • 微信小程序之scroll-view的flex布局問題

    摘要：關(guān)于微信小程序的組件，第一次寫的時候是直接在中用了一層容器包裹子元素，然后用了布局，并且是用了組件來實(shí)現(xiàn)的橫向滾動，后面有提出改進(jìn)，但是不記錄下，就發(fā)現(xiàn)過了幾天，就有點(diǎn)懵了效果圖在里加一層容器，使用布局實(shí)現(xiàn)這里用布局實(shí)現(xiàn)的話，就要用組 關(guān)于微信小程序的scroll-view組件，第一次寫的時候是直接在scroll-view中用了一層容器包裹子元素，然后用了flex布局，并且是用了組件來...

    nihao 評論0 收藏0

  • 微信小程序之選項(xiàng)卡

    摘要：我們在函數(shù)中通過獲取設(shè)備的寬高來設(shè)置組件高度以及高度為導(dǎo)航欄的高度點(diǎn)擊導(dǎo)航欄切換內(nèi)容點(diǎn)擊切換滑動內(nèi)容切換導(dǎo)航欄滑動切換可滾動區(qū)域滾動最底刷新數(shù)據(jù)頁面上拉觸底事件的處理函數(shù)更新列表一個漂亮的選項(xiàng)卡就完成了完整案例 選項(xiàng)卡隨處可見，微信小程序中也不例外，下面來寫一個簡單的小程序選項(xiàng)卡 思路 之前寫過基于swiper的選項(xiàng)卡，在小程序中有swiper組件，毫無疑問這里要用到swiper組件...

    stormjun 評論0 收藏0

  • 微信小程序——商城篇

    摘要：微信小程序之跳轉(zhuǎn)在進(jìn)入商品詳情頁以后，點(diǎn)擊左下角的圖標(biāo)原應(yīng)該跳轉(zhuǎn)到首頁，但是一直點(diǎn)也不跳，而且也不報錯。放下效果圖微信小程序購物車購物車頁面邏輯的話，要按業(yè)務(wù)需求來。 前言 隨著wepy和mpvue的出現(xiàn)及流行，開發(fā)小程序變的越來越便捷和強(qiáng)大，作為基佬社區(qū)的一份子，我們都需要把自己遇到的問題以及如何解決的方式相互分享，這樣才能幫助到更多的朋（ji）友（lao）。如有寫的不足的地方，請各...

    k00baa 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<