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的輸入框中文本的行高便可解決該問題。

關於

• 文章首發於:uni-app textarea auto-height 文字出現上下滾動