uniapp如何实现textarea自动增高功能

在uniapp开发中，如何实现类似微信聊天输入框的textarea自动增高效果？现在textarea设置了固定高度后，用户输入多行内容时会出现滚动条，希望实现根据输入内容动态调整高度的功能。尝试过用动态计算content高度再赋值给textarea的style，但效果不流畅且容易闪动。是否有更优雅的解决方案或现成的组件可以推荐？需要兼顾iOS和安卓平台的兼容性。

2 回复

在textarea组件上添加auto-height属性即可实现自动增高。例如：<textarea auto-height placeholder="输入内容"></textarea>。注意：该属性仅在小程序端生效，H5端需自行实现高度计算。


在 UniApp 中，实现 textarea 自动增高功能可以通过监听输入内容的变化，动态调整 textarea 的高度。以下是具体实现方法：

实现思路

  1. 使用 textarea 组件的 @input 事件监听输入内容变化。
  2. 通过计算内容高度，动态设置 textarea 的高度样式。
  3. 使用 uni.createSelectorQuery() 获取元素信息，确保高度计算准确。

代码示例

<template>
  <view>
    <textarea 
      :style="{ height: textareaHeight + 'px' }" 
      @input="onInput" 
      v-model="content" 
      placeholder="请输入内容"
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      textareaHeight: 40 // 初始高度
    }
  },
  methods: {
    onInput(event) {
      // 使用 nextTick 确保 DOM 更新后获取高度
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('textarea').boundingClientRect(data => {
          if (data) {
            // 根据内容调整高度，可设置最大高度限制
            const newHeight = Math.min(data.height, 200); // 例如限制最大高度为200px
            this.textareaHeight = newHeight;
          }
        }).exec();
      });
    }
  }
}
</script>

注意事项

  • 性能优化：频繁调整高度可能影响性能，可考虑使用防抖函数（如 lodash.debounce）限制触发频率。
  • 最大高度限制：建议设置最大高度，避免无限增高影响页面布局。
  • 平台差异：不同平台（如 H5、小程序）可能表现略有差异，需测试调整。

替代方案

如果上述方法在某些平台不兼容，可使用 CSS 方案（仅限 H5）：

textarea {
  min-height: 40px;
  max-height: 200px;
  overflow-y: auto;
}

但 CSS 方案在部分小程序平台可能无效，推荐使用 JavaScript 动态计算。

以上方法在 UniApp 中通用，适用于多数场景。如有特殊需求，可进一步调整高度计算逻辑。

回到顶部