小程序在线答题系统设计

发布时间：2020-12-14 19:12:52 所属栏目：资源来源：网络整理

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

前言

帮一个可爱的小姐姐改一个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" placeholder.textarea {
        margin-top: 80upx;
        width: 80vw;
        border: 1rpx solid red;
        min-height: 100upx;
        font-size: 20px
    }
CSS

跟在微信原生语法中写的一模一样，却产生了不同的效果。说明是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中文字比较稀疏。故猜测可能是行高将文字的整体高度撑起，大于了输入框的可视区域。所uni-app中出现了滚动的效果。

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

关于

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!