如果我们拿到的设计图是标题和输入框文字左右对齐的话,这种时候使用正常的对齐样式,等到真机上进行调试的时候就会发现 Android 和 iOS 的表现形式不一样,textarea
的 placeholder
中的文字总是向下一些的,让人很是头疼,出现这种问题之后多出查找相关资料,最终得出结论:
由于微信小程序的
textarea
组件在 Android 和 iOS 中默认样式不同,在 iOS 中会有默认的
padding
,且无法置 0。 同时placeholder-style
对vertical-align
、line-height
等大量css属性都不生效。 这一系列的问题导致了placeholder
在真机上可能会出现偏移。
既然知道原因了,博主对于出现这种问题的解决思路就是通过 js 来判断终端型号,动态给 textarea
的 placeholder
样式最数据处理。
一、通过微信封装的小程序API getSystemInfo
来获取用户打开小程序应用的终端型号
wx.getSystemInfo({
success: (res) => {
console.log(res.system)
var marTop;
if (res.system.indexOf("iOS") != -1) {
marTop = '-12rpx';
} else {
marTop = 0
}
that.setData({
marTop: marTop
})
}
});
如果是iOS的话就设置向上偏移 -12rpx
,否则就不进行偏移
二、在wxml
的 textarea
的组件上设置动态的margin-top
样式
<textarea class="textarea" value="{{introduce}}" name="introduce" style="margin-top: {{marTop}}" hidden="{{hiddenTextarea}}" placeholder="请输入店铺简介" placeholder-class="textarea-placeholder" bindinput="inputTextarea" maxlength="200"></textarea>
这样就可以比较完美的解决这个问题了,如果其他小伙伴有更好的方法欢迎留言。