发现问题:输入一些文字后对比,textarea组件在苹果IOS和安卓手机中输入内容后的样式
发现不同:textarea组件在安卓和苹果手机中输入内容后的局部特写
虽然在安卓手机上padding的值可以正常设置,但为了跟苹果手机一致,可以设置最小值为10rpx。那这样就有了新的问题,由于ios端本身最小值就是10rpx,那此时若不做处理就成了20rpx。所以,我们要判断用户的设备。大致思路就是:如果用户的是ios设备,就设置padding为0,这样就跟安卓端统一了。
创建 textarea-padding-bug-on-ios
的组件
// 组件的核心js代码 /* 获取系统信息 */ handleGetSystemInfo() { wx.getSystemInfo({ /* 获取系统信息 官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html */ success: (res) => { this.setData({ platform: res.platform /* 客户端平台 */ }) console.log('获取系统信息 ', res) } }) }
上面的handleGetSystemInfo
方法写在methods
中,然后在ready
中调用this.handleGetSystemInfo()
方法即可。另外,wxml
模板页也需要修改下,在textarea
的class
上做下判断即可。相关代码如下:
<textarea class="textarea {{platform === 'ios' ? 'textarea__ios_bug' : '' }}"></textarea>
最后,在wxss
中添加一个textarea__ios_bug
类名
// 组件的核心wxss源码 /* 修复ios的padding bug start */ .textarea__ios_bug { padding: 0; /* 此处的值= 安卓端的值 - 10,单位:rpx。示例:安卓上是16rpx,此处就是6rpx */ } /* 修复ios的padding bug end */
现在左侧间距苹果和安卓就一样了,如下图所示
设置一个足够高的padding-bottom
再设置一个负的相等的margin-bottom
,这样正负相互抵消,就实现了自适应高度了。
// 组件的核心WXML源码 <view class="form__label_content textarea-wrap {{platform === 'ios' ? 'textarea__ios_bug' : ''}}"> <textarea class="textarea" placeholder="请输入详细地址"></textarea> </view>
// 组件的核心wxss源码 .textarea-wrap .textarea { background: transparent; width: 100%; height: 120rpx; margin: 0; font-size: 28rpx; padding: 10rpx; /* ios端最小值 20rpx 10rpx */ line-height: 34rpx; /* ios端最小行高*/ } /* 修复ios上的bug start */ .textarea__ios_bug .textarea { padding: 0; margin-top: -10rpx; /* 负10抵消 */ } /* 修复ios上的bug end */
最后,来看下在上述代码上略加优化后的效果吧。如图:使用margin的负边距来抵消padding
ios端的padding
最小值为:20rpx 10rpx
,最小line-height
为:34rpx
。