首次在這里寫點(diǎn)東西,還請各位大佬擔(dān)待點(diǎn)。
摘要: 在上一節(jié)的設(shè)計稿中,詳細(xì)地址那塊兒就是一個textarea組件。如圖:
其他無關(guān)的就不說了,我們直接進(jìn)入正題。 一、textarea在模擬器、安卓和蘋果中的效果為了便于觀察textarea組件的尺寸范圍,我們給textarea設(shè)置一個背景色。如圖:
(textarea在模擬器和安卓及蘋果手機(jī)上的效果textarea在模擬器和安卓及蘋果手機(jī)上的效果) 看到區(qū)別了嗎?如果沒有,再來張大圖。如圖:
二、不就是個padding嗎?!對于有前端基礎(chǔ)的看官來說,一眼就知道這是什么原因。是的,按照正常邏輯,這個空隙就是由padding引起的。 2.1、wxml代碼<textarea style="background:#666;padding:0" value="加padding就有用了嗎?"></textarea> 代碼寫完了,我們再用蘋果手機(jī)看下效果。如圖:
奇了怪了,難道textarea不支持padding嗎?于是,我又將padding的值修改成40px,此時在安卓手機(jī)上的效果如下:
那這個蘋果手機(jī)到底支持不支持微信小程序里的textarea組件的padding屬性呢?要說不支持吧,修改成40時也有效,要說支持吧,改成0又無效!這就有點(diǎn)坑爹了! 三、微信小程序里的textarea確實(shí)有bug為了便于測試,這回我們直接測一組吧。效果如圖:
看到了嗎?當(dāng)值小于或等于0時,在蘋果手機(jī)中壓根就沒有任何反應(yīng)!雖然正常的網(wǎng)頁中padding的值是不能為負(fù)的!但此時連0!important都無能為力?。?! 四、此坑有什么影響可能有些看官還不知道這坑有什么影響,拿我們的設(shè)計稿來說。我們寫的頁面總得與設(shè)計稿一致吧!那些現(xiàn)在問題就來了,這個textarea組件在安卓和蘋果上的表現(xiàn)都不一樣,要想在兩種手機(jī)上展現(xiàn)效果一樣,必須得對蘋果單獨(dú)處理才行!否則,我們在安卓上布局是好的,到了蘋果手機(jī)上面,就已經(jīng)錯位了!所以,這就是個超級大坑!要不是因為藝靈我用二手的iphone 6s測試,這個bug估計還不知道什么時候才能知道呢!如果是等到用戶反饋才知道,這可是件多么坑爹的事情?。?! 五、微信小程序中textarea內(nèi)邊距的坑通吃iphone各版本看官可能會說:“都什么年代了,藝靈你還用個破6s來測試!” 行,為了驗證此bug并非只是iphone 6s才有,于是我又召喚了我的小伙伴們。聊天如圖:
這回就問你服不服,iphone X,壕不?X都陣亡了?。。?/p> 六、如何解決?搞過微信小程序的看官都知道,在小程序里面不像正常網(wǎng)頁那樣可以隨便寫js,在這里一切都要受限制!
微信小程序官方也有對應(yīng)的文檔,文檔地址: 順便補(bǔ)充一句,微信官方提供的判斷依舊不全面,最新出來的蘋果手機(jī)還沒有完全支持!相關(guān)的坑可以在官方社區(qū)的問答中找到??樱】?!坑!坑!坑!坑!坑! |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)