uni-app textarea auto-height 文字出

前言

• 帮一个可爱的小姐姐改一个uni-app构建的微信小程序时，在使用textarea组件时遇到的一点小问题。
• 描述问题：在uni-app中,<textarea>的auto-hetght属性会出现高度不够，文字能够上下移动的问题,具体见下图:

image

当输入的文字过多时,textarea内的文字可以上下滚动。 这不属于产品的需求，产品要的是输入框高度随着文字的变化而变化不能出现滚动条，而在uni-app打包的微信小程序中却出现了滚动

解决思路

• 排查原生微信小程序中是否有该问题 在微信小程序原生语法中尝试使用该组件：

    <textarea placeholder="sxx是猪" class="textarea" auto-height="true"></textarea>

.textarea{
  margin-top: 80rpx;
  width: 80vw;
  border: 1rpx solid red;
  min-height: 100rpx;
  font-size: 20px
}

image

发现在原生微信小程序语法中,使用auto-height属性，输入框高度会随着文字的增加而增加。

• 在uni-app中新建项目，打包编译至微信小程序开发工具查看效果

image

<textarea auto-height="true" placeholder="sxx是猪" class="textarea"></textarea>

.textarea {
        margin-top: 80upx;
        width: 80vw;
        border: 1rpx solid red;
        min-height: 100upx;
        font-size: 20px
    }

跟在微信原生语法中写的一模一样，却产生了不同的效果。说明是uni-app编译的小程序会出现这个bug

• 进一步排查，查看小程序工具中调试工具Wxml下的Dom以及style

初始没有输入文本的时候，微信小程序的textarea有一个height:22.5px的行内样式

image

而在uni-app(以下简称uni-app)编译的小程序下面，初始的高度只有17px

image

输入一段相同的文本之后进行比较：sxx是猪sxx是猪sxx是猪sxx是猪sxx是猪sxx是猪sxx是猪sxx是猪sxx是猪sxx是猪sxx是猪

微信小程序

image

uni-app

image

输入相同的内容，微信小程序高度为73px,uni-app高度也为73px,但是uni-app文本的字体高度却大于微信小程序的文本行高，所以会出现滚动

• 尝试修改uni-app的行高

.textarea {
        margin-top: 80upx;
        width: 80vw;
        border: 1rpx solid red;
        min-height: 100upx;
        font-size: 20px;
        line-height: 20px;
    }

运行之后，解决问题！！

原理

• 观察得知，微信小程序中由于输入框中文字比较紧凑，uni-app中文字比较稀疏。故猜测可能是行高将文字的整体高度撑起，大于了输入框的可视区域。所uni-app中出现了滚动的效果。

image

• 所以，修改uni-app的输入框中文本的行高即可解决该问题。

关于

• 文章首发于:uni-app textarea auto-hetght 文字出现上下滚动