uni-app
构建的微信小程序时,在使用textarea
组件时遇到的一点小问题。uni-app
中,<textarea>
的auto-hetght
属性会出现高度不够,文字能够上下移动的问题,具体见下图:当输入的文字过多时,textarea内的文字可以上下滚动。 这不属于产品的需求,产品要的是输入框高度随着文字的变化而变化不能出现滚动条,而在uni-app
打包的微信小程序中却出现了滚动
发现在原生微信小程序语法中,使用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
中文字比较稀疏。故猜测可能是行高将文字的整体高度撑起,大于了输入框的可视区域。所uni-app
中出现了滚动的效果。原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。