微信小程序从入坑到放弃之坑八:textarea在苹果手机中的大Bug

艺灵

首次在这里写点东西,还请各位大佬担待点。

摘要:
昨天的placeholder-class只是希望各位看官注意,而今天的textarea就绝对是一个超级大坑!而且如果看官手中没有苹果手机测试的话,这个可就真的是个坑了!为啥?难道要等到用户向你反馈你们产品有bug???......
上一篇的《微信小程序从入坑到放弃之坑七:input组件的占位符placeholder》,没啥大坑,而这篇的textarea可就不一样了!这绝对是一个超大的Bug!!!

在上一节的设计稿中,详细地址那块儿就是一个textarea组件。如图:图片描述

其他无关的就不说了,我们直接进入正题。

一、textarea在模拟器、安卓和苹果中的效果

为了便于观察textarea组件的尺寸范围,我们给textarea设置一个背景色。如图:O1CN01NfwGzR1rapSOGbEwT_!!759415648.png
(一个带背景色的textarea组件示例代码一个带背景色的textarea组件示例代码)
然后保存后看下模拟器、安卓手机和苹果手机中的效果吧。如图:O1CN01IXRDIX1rapSQ45Kmv_!!759415648.jpg
(textarea在模拟器和安卓及苹果手机上的效果textarea在模拟器和安卓及苹果手机上的效果)

看到区别了吗?如果没有,再来张大图。如图:O1CN01QkmThs1rapSNf2D5s_!!759415648.png
(textarea在苹果手机上距离顶部有空隙textarea在苹果手机上距离顶部有空隙)

二、不就是个padding吗?!

对于有前端基础的看官来说,一眼就知道这是什么原因。是的,按照正常逻辑,这个空隙就是由padding引起的。

2.1、wxml代码

<textarea style="background:#666;padding:0" value="加padding就有用了吗?"></textarea>

代码写完了,我们再用苹果手机看下效果。如图:O1CN01mEovUD1rapSRiJsBG_!!759415648.jpg
(微信小程序里的textarea设置padding为0时在苹果手机中没有生效)
微信小程序里的textarea设置padding为0时在苹果手机中没有生效可以看到,此时这个padding:0在苹果手机上并没有生效!

奇了怪了,难道textarea不支持padding吗?于是,我又将padding的值修改成40px,此时在安卓手机上的效果如下:O1CN0196giFj1rapSQ45Ox3_!!759415648.jpg
(设置padding为40时在安卓手机中有效设置padding为40时在安卓手机中有效)
我们可以看到,此时安卓手机上是有效的,再来看看苹果手机吧,如图:O1CN01rPEHEI1rapSJMeHMM_!!759415648.jpg
(设置padding为40时在苹果手机中也有效)
咦,怎么又有效果了?!

那这个苹果手机到底支持不支持微信小程序里的textarea组件的padding属性呢?要说不支持吧,修改成40时也有效,要说支持吧,改成0又无效!这就有点坑爹了!

三、微信小程序里的textarea确实有bug

为了便于测试,这回我们直接测一组吧。效果如图:O1CN01iHTZNc1rapSQ44b4r_!!759415648.jpg
(测试发现在微信小程序中,苹果手机对padding的值有临界点)

看到了吗?当值小于或等于0时,在苹果手机中压根就没有任何反应!虽然正常的网页中padding的值是不能为负的!但此时连0!important都无能为力!!!

四、此坑有什么影响

可能有些看官还不知道这坑有什么影响,拿我们的设计稿来说。我们写的页面总得与设计稿一致吧!那些现在问题就来了,这个textarea组件在安卓和苹果上的表现都不一样,要想在两种手机上展现效果一样,必须得对苹果单独处理才行!否则,我们在安卓上布局是好的,到了苹果手机上面,就已经错位了!所以,这就是个超级大坑!要不是因为艺灵我用二手的iphone 6s测试,这个bug估计还不知道什么时候才能知道呢!如果是等到用户反馈才知道,这可是件多么坑爹的事情!!!

五、微信小程序中textarea内边距的坑通吃iphone各版本

看官可能会说:“都什么年代了,艺灵你还用个破6s来测试!”

行,为了验证此bug并非只是iphone 6s才有,于是我又召唤了我的小伙伴们。聊天如图:O1CN01KBopfc1rapSQtbLy6_!!759415648.png
(微信小程序中textarea的内边距bug在iphone各版本上都存在)

这回就问你服不服,iphone X,壕不?X都阵亡了!!!

六、如何解决?

搞过微信小程序的看官都知道,在小程序里面不像正常网页那样可以随便写js,在这里一切都要受限制!

微信小程序官方也有对应的文档,文档地址:
developers.weixin.qq.com/miniprogram/dev/api/system/system-info/wx.getSystemInfo.html?search-key=wx.getSystemInfo 。官方的文档向来都这样,要么不给案例,要么就简短的写下。现在的机型那么多,鬼知道怎么判断啊!于是我又在网上搜索后找到了现成的判断小程序是用安卓还是IOS打开的方法,原文地址:blog.csdn.net/niesiyuan000/article/details/80325988。

顺便补充一句,微信官方提供的判断依旧不全面,最新出来的苹果手机还没有完全支持!相关的坑可以在官方社区的问答中找到。坑!坑!坑!坑!坑!坑!坑!

阅读 6.8k
40 声望
2 粉丝
0 条评论
40 声望
2 粉丝
文章目录
宣传栏