国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

微信小程序從入坑到放棄之坑八：textarea在蘋(píng)果手機(jī)中的大Bug

dantezhao / 1562人閱讀

摘要：順便補(bǔ)充一句，微信官方提供的判斷依舊不全面，最新出來(lái)的蘋(píng)果手機(jī)還沒(méi)有完全支持相關(guān)的坑可以在官方社區(qū)的問(wèn)答中找到。

首次在這里寫(xiě)點(diǎn)東西，還請(qǐng)各位大佬擔(dān)待點(diǎn)。

摘要：
昨天的placeholder-class只是希望各位看官注意，而今天的textarea就絕對(duì)是一個(gè)超級(jí)大坑！而且如果看官手中沒(méi)有蘋(píng)果手機(jī)測(cè)試的話(huà)，這個(gè)可就真的是個(gè)坑了！為啥？難道要等到用戶(hù)向你反饋你們產(chǎn)品有bug？？？......
上一篇的《微信小程序從入坑到放棄之坑七：input組件的占位符placeholder》，沒(méi)啥大坑，而這篇的textarea可就不一樣了！這絕對(duì)是一個(gè)超大的Bug！！！

在上一節(jié)的設(shè)計(jì)稿中，詳細(xì)地址那塊兒就是一個(gè)textarea組件。如圖：

其他無(wú)關(guān)的就不說(shuō)了，我們直接進(jìn)入正題。

一、textarea在模擬器、安卓和蘋(píng)果中的效果

為了便于觀(guān)察textarea組件的尺寸范圍，我們給textarea設(shè)置一個(gè)背景色。如圖：
（一個(gè)帶背景色的textarea組件示例代碼一個(gè)帶背景色的textarea組件示例代碼）
然后保存后看下模擬器、安卓手機(jī)和蘋(píng)果手機(jī)中的效果吧。如圖：
（textarea在模擬器和安卓及蘋(píng)果手機(jī)上的效果textarea在模擬器和安卓及蘋(píng)果手機(jī)上的效果）

看到區(qū)別了嗎？如果沒(méi)有，再來(lái)張大圖。如圖：
（textarea在蘋(píng)果手機(jī)上距離頂部有空隙textarea在蘋(píng)果手機(jī)上距離頂部有空隙）

二、不就是個(gè)padding嗎？！

對(duì)于有前端基礎(chǔ)的看官來(lái)說(shuō)，一眼就知道這是什么原因。是的，按照正常邏輯，這個(gè)空隙就是由padding引起的。

2.1、wxml代碼

代碼寫(xiě)完了，我們?cè)儆锰O(píng)果手機(jī)看下效果。如圖：
（微信小程序里的textarea設(shè)置padding為0時(shí)在蘋(píng)果手機(jī)中沒(méi)有生效）
微信小程序里的textarea設(shè)置padding為0時(shí)在蘋(píng)果手機(jī)中沒(méi)有生效可以看到，此時(shí)這個(gè)padding:0在蘋(píng)果手機(jī)上并沒(méi)有生效！

奇了怪了，難道textarea不支持padding嗎？于是，我又將padding的值修改成40px，此時(shí)在安卓手機(jī)上的效果如下：
（設(shè)置padding為40時(shí)在安卓手機(jī)中有效設(shè)置padding為40時(shí)在安卓手機(jī)中有效）
我們可以看到，此時(shí)安卓手機(jī)上是有效的，再來(lái)看看蘋(píng)果手機(jī)吧，如圖：
（設(shè)置padding為40時(shí)在蘋(píng)果手機(jī)中也有效）
咦，怎么又有效果了？！

那這個(gè)蘋(píng)果手機(jī)到底支持不支持微信小程序里的textarea組件的padding屬性呢？要說(shuō)不支持吧，修改成40時(shí)也有效，要說(shuō)支持吧，改成0又無(wú)效！這就有點(diǎn)坑爹了！

三、微信小程序里的textarea確實(shí)有bug

為了便于測(cè)試，這回我們直接測(cè)一組吧。效果如圖：
（測(cè)試發(fā)現(xiàn)在微信小程序中，蘋(píng)果手機(jī)對(duì)padding的值有臨界點(diǎn)）

看到了嗎？當(dāng)值小于或等于0時(shí)，在蘋(píng)果手機(jī)中壓根就沒(méi)有任何反應(yīng)！雖然正常的網(wǎng)頁(yè)中padding的值是不能為負(fù)的！但此時(shí)連0!important都無(wú)能為力?。?！

四、此坑有什么影響

可能有些看官還不知道這坑有什么影響，拿我們的設(shè)計(jì)稿來(lái)說(shuō)。我們寫(xiě)的頁(yè)面總得與設(shè)計(jì)稿一致吧！那些現(xiàn)在問(wèn)題就來(lái)了，這個(gè)textarea組件在安卓和蘋(píng)果上的表現(xiàn)都不一樣，要想在兩種手機(jī)上展現(xiàn)效果一樣，必須得對(duì)蘋(píng)果多帶帶處理才行！否則，我們?cè)诎沧可喜季质呛玫?，到了蘋(píng)果手機(jī)上面，就已經(jīng)錯(cuò)位了！所以，這就是個(gè)超級(jí)大坑！要不是因?yàn)樗囲`我用二手的iphone 6s測(cè)試，這個(gè)bug估計(jì)還不知道什么時(shí)候才能知道呢！如果是等到用戶(hù)反饋才知道，這可是件多么坑爹的事情！??！

五、微信小程序中textarea內(nèi)邊距的坑通吃iphone各版本

看官可能會(huì)說(shuō)：“都什么年代了，藝靈你還用個(gè)破6s來(lái)測(cè)試！”

行，為了驗(yàn)證此bug并非只是iphone 6s才有，于是我又召喚了我的小伙伴們。聊天如圖：
（微信小程序中textarea的內(nèi)邊距bug在iphone各版本上都存在）

這回就問(wèn)你服不服，iphone X，壕不？X都陣亡了?。。?/p> 六、如何解決？

搞過(guò)微信小程序的看官都知道，在小程序里面不像正常網(wǎng)頁(yè)那樣可以隨便寫(xiě)js，在這里一切都要受限制！

微信小程序官方也有對(duì)應(yīng)的文檔，文檔地址：
developers.weixin.qq.com/miniprogram/dev/api/system/system-info/wx.getSystemInfo.html?search-key=wx.getSystemInfo 。官方的文檔向來(lái)都這樣，要么不給案例，要么就簡(jiǎn)短的寫(xiě)下?，F(xiàn)在的機(jī)型那么多，鬼知道怎么判斷??！于是我又在網(wǎng)上搜索后找到了現(xiàn)成的判斷小程序是用安卓還是IOS打開(kāi)的方法，原文地址：blog.csdn.net/niesiyuan000/article/details/80325988。

順便補(bǔ)充一句，微信官方提供的判斷依舊不全面，最新出來(lái)的蘋(píng)果手機(jī)還沒(méi)有完全支持！相關(guān)的坑可以在官方社區(qū)的問(wèn)答中找到?？?！坑！坑！坑！坑！坑！坑！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/108778.html

相關(guān)文章

  • 微信公眾號(hào)開(kāi)發(fā)之坑（一）

    摘要：有個(gè)說(shuō)法是微信瀏覽器移動(dòng)端。微信上傳圖片，在蘋(píng)果和安卓系統(tǒng)下的小區(qū)別。微信分享鏈接不支持微信分享接口不支持傳遞。 有個(gè)說(shuō)法是微信瀏覽器==移動(dòng)端IE6。分享一下開(kāi)發(fā)中遇到的坑 1.在自己的公眾號(hào)能實(shí)現(xiàn)支付，從別的公眾號(hào)進(jìn)來(lái)不能支付。 既然自己的公眾號(hào)能支付了，那么很有可能是跳轉(zhuǎn)過(guò)來(lái)的公眾號(hào)的url出現(xiàn)的問(wèn)題。正確的：htt P://3w.yijia.com/wechat/pay/？id...

    Barry_Ng 評(píng)論0 收藏0

  • 微信公眾號(hào)開(kāi)發(fā)之坑（一）

    摘要：有個(gè)說(shuō)法是微信瀏覽器移動(dòng)端。微信上傳圖片，在蘋(píng)果和安卓系統(tǒng)下的小區(qū)別。微信分享鏈接不支持微信分享接口不支持傳遞。 有個(gè)說(shuō)法是微信瀏覽器==移動(dòng)端IE6。分享一下開(kāi)發(fā)中遇到的坑 1.在自己的公眾號(hào)能實(shí)現(xiàn)支付，從別的公眾號(hào)進(jìn)來(lái)不能支付。 既然自己的公眾號(hào)能支付了，那么很有可能是跳轉(zhuǎn)過(guò)來(lái)的公眾號(hào)的url出現(xiàn)的問(wèn)題。正確的：htt P://3w.yijia.com/wechat/pay/？id...

    shinezejian 評(píng)論0 收藏0

  • 微信公眾號(hào)開(kāi)發(fā)之坑（一）

    摘要：有個(gè)說(shuō)法是微信瀏覽器移動(dòng)端。微信上傳圖片，在蘋(píng)果和安卓系統(tǒng)下的小區(qū)別。微信分享鏈接不支持微信分享接口不支持傳遞。 有個(gè)說(shuō)法是微信瀏覽器==移動(dòng)端IE6。分享一下開(kāi)發(fā)中遇到的坑 1.在自己的公眾號(hào)能實(shí)現(xiàn)支付，從別的公眾號(hào)進(jìn)來(lái)不能支付。 既然自己的公眾號(hào)能支付了，那么很有可能是跳轉(zhuǎn)過(guò)來(lái)的公眾號(hào)的url出現(xiàn)的問(wèn)題。正確的：htt P://3w.yijia.com/wechat/pay/？id...

    gplane 評(píng)論0 收藏0

  • 微信公眾號(hào)開(kāi)發(fā)之坑（一）

    摘要：有個(gè)說(shuō)法是微信瀏覽器移動(dòng)端。微信上傳圖片，在蘋(píng)果和安卓系統(tǒng)下的小區(qū)別。微信分享鏈接不支持微信分享接口不支持傳遞。 有個(gè)說(shuō)法是微信瀏覽器==移動(dòng)端IE6。分享一下開(kāi)發(fā)中遇到的坑 1.在自己的公眾號(hào)能實(shí)現(xiàn)支付，從別的公眾號(hào)進(jìn)來(lái)不能支付。 既然自己的公眾號(hào)能支付了，那么很有可能是跳轉(zhuǎn)過(guò)來(lái)的公眾號(hào)的url出現(xiàn)的問(wèn)題。正確的：htt P://3w.yijia.com/wechat/pay/？id...

    李濤 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<