uni-app textarea高度自适应会出现滚动条

uni-app textarea高度自适应会出现滚动条

操作步骤：

  • HelloUniApp小程序—内置组件—表单组件—textarea

预期结果：

  • 不出现滚动条

实际结果：

  • 出现了滚动条

bug描述：

  • textarea高度自适应会出现滚动条，HelloUniApp小程序可复现

image

信息类别 信息内容
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 4.08
第三方开发者工具版本号 1.06.2402021
基础库版本号 3.4.0
项目创建方式 HBuilderX

更多关于uni-app textarea高度自适应会出现滚动条的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

已解决

更多关于uni-app textarea高度自适应会出现滚动条的实战教程也可以访问 https://www.itying.com/category-93-b0.html


如何拒绝的呢？我这边也遇见这个问题

回复 1***@qq.com: 请看vcr https://developers.weixin.qq.com/community/develop/doc/0000c6532d85f86a3590a446a6c800

请问解决了吗

控制textarea重新计算高度，关闭自动增高然后延迟启动自动增高会触发重新计算高度的机制。

在 uni-app 中使用 textarea 组件时，如果你希望实现高度自适应但出现了滚动条，可能是因为 textarea 的默认样式或某些 CSS 属性导致的。以下是一些可能的解决方案：

1. 使用 auto-height 属性

uni-app 的 textarea 组件提供了一个 auto-height 属性，可以自动调整高度以适应内容。你可以尝试启用这个属性：

<textarea auto-height></textarea>

2. 使用 CSS 控制高度

如果你不想使用 auto-height 属性，可以通过 CSS 来控制 textarea 的高度。你可以设置 height: auto 或 min-height 来实现自适应高度：

<textarea class="auto-height-textarea"></textarea>

.auto-height-textarea {
  height: auto;
  min-height: 100px; /* 设置一个最小高度 */
  overflow-y: hidden; /* 隐藏滚动条 */
}

3. 动态计算高度

如果你需要更精确地控制高度，可以通过 JavaScript 动态计算 textarea 的高度。例如，你可以监听 textarea 的 input 事件，并根据内容的高度来调整 textarea 的高度：

<textarea :style="textareaStyle" @input="adjustHeight"></textarea>

export default {
  data() {
    return {
      textareaStyle: {
        height: 'auto',
        minHeight: '100px',
        overflowY: 'hidden'
      }
    };
  },
  methods: {
    adjustHeight(event) {
      const textarea = event.target;
      textarea.style.height = 'auto';
      textarea.style.height = textarea.scrollHeight + 'px';
    }
  }
};

4. 检查父容器样式

有时 textarea 的滚动条可能是由于父容器的样式引起的。确保父容器没有设置 overflow: scroll 或其他可能影响 textarea 高度的样式。

5. 使用 scroll-view 包裹

如果你确实需要滚动条，可以考虑使用 scroll-view 包裹 textarea，并设置 scroll-view 的样式来控制滚动行为：

<scroll-view scroll-y style="height: 200px;">
  <textarea></textarea>
</scroll-view>
回到顶部