textarea在苹果和安卓之前的兼容样式调整

本文主要是介绍textarea在苹果和安卓之前的兼容样式调整，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

发现问题：输入一些文字后对比，textarea组件在苹果IOS和安卓手机中输入内容后的样式

发现不同：textarea组件在安卓和苹果手机中输入内容后的局部特写

虽然在安卓手机上padding的值可以正常设置，但为了跟苹果手机一致，可以设置最小值为10rpx。那这样就有了新的问题，由于ios端本身最小值就是10rpx，那此时若不做处理就成了20rpx。所以，我们要判断用户的设备。大致思路就是：如果用户的是ios设备，就设置padding为0，这样就跟安卓端统一了。

解决方法：

第一步：统一padding

创建 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 */

现在左侧间距苹果和安卓就一样了，如下图所示

第二步：祭出margin 大法

设置一个足够高的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。

这篇关于textarea在苹果和安卓之前的兼容样式调整的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！