uni-app textarea auto-height 文字出现上下滚动

发布于 / 学习

前言

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

当输入的文字过多时,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
}

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

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

<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的行内样式

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

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

微信小程序

uni-app

输入相同的内容,微信小程序高度为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中出现了滚动的效果。

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

关于

本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可
本文链接: https://www.ahwgs.cn/uni-app-textarea-auto-hetght.html