uniapp的textarea设置auto-height后文本换行出现滚动条如何解决

在uniapp中，textarea设置了auto-height属性后，当文本换行时会出现滚动条，如何解决这个问题？希望在不影响自动高度调整的情况下，消除多余的滚动条。

2 回复

设置 auto-height 后，若仍有滚动条，可尝试以下方法：

  1. 检查 textarea 的 maxlength 或 max-height 是否限制高度。
  2. 使用 :style 动态绑定高度，通过计算内容行数调整高度。
  3. 监听 @linechange 事件，手动更新高度。

若仍无效，可能是平台差异，建议测试多端兼容性。


在Uniapp中，当设置Textarea的auto-height属性后，文本换行时仍出现滚动条，可以通过以下方法解决：

  1. 检查CSS样式：确保Textarea容器没有固定高度或最大高度限制，避免与自动高度冲突。

    .textarea-class {
  min-height: 80rpx; /* 可选，设置最小高度 */
  max-height: none; /* 移除最大高度限制 */
}

  2. 使用动态计算高度：结合@linechange事件动态调整高度。

    <template>
  <textarea 
    :style="{ height: textareaHeight + 'px' }" 
    auto-height 
    @linechange="handleLineChange"
  ></textarea>
</template>
<script>
export default {
  data() {
    return {
      textareaHeight: 40
    };
  },
  methods: {
    handleLineChange(e) {
      // 根据行数动态调整高度，每行高度约20px（根据字体调整）
      this.textareaHeight = Math.max(40, e.detail.height * 20);
    }
  }
};
</script>

  3. 平台差异处理：部分平台（如H5）可能需要额外样式调整，添加：

    textarea {
  resize: none; /* 禁用手动调整 */
  overflow: hidden; /* 隐藏滚动条 */
}

  4. 更新Uniapp版本：确保使用最新框架版本，修复已知兼容性问题。

通过以上方法，可消除滚动条并保持自适应高度效果。

回到顶部