uniapp如何实现textarea自动高度并设置最大高度

在uniapp中，如何让textarea组件实现自动高度调整，同时又能设置最大高度限制？现在遇到的问题是textarea不会根据内容自动扩展高度，或者超出最大高度后出现滚动条。请问有没有完整的代码示例或解决方案？最好能兼容微信小程序和H5平台。

2 回复

在uniapp中，使用textarea组件，设置auto-height属性为true实现自动高度。通过CSS的max-height样式限制最大高度，例如：max-height: 200px;。注意内容超出时会出现滚动条。


在 UniApp 中，要实现 textarea 自动高度并设置最大高度，可以通过动态计算内容高度并绑定样式来实现。以下是具体步骤和代码示例：

实现思路

  1. 使用 textarea 组件的 @input 事件监听输入内容变化。
  2. 在事件处理函数中，通过 uni.createSelectorQuery() 获取 textarea 的实例，动态计算内容高度。
  3. 根据内容高度调整 textarea 的高度，同时设置最大高度限制。
  4. 使用 style 绑定动态高度值。

代码示例

<template>
  <view>
    <textarea 
      :style="{ height: textareaHeight + 'px', 'max-height': maxHeight + 'px', overflow: 'auto' }"
      @input="onInput"
      placeholder="请输入内容"
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      textareaHeight: 40, // 初始高度
      maxHeight: 200      // 最大高度
    };
  },
  methods: {
    onInput(event) {
      // 延迟执行以确保内容已渲染
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('textarea').boundingClientRect(data => {
          if (data) {
            // 计算新高度，不超过最大高度
            let newHeight = Math.min(data.height, this.maxHeight);
            this.textareaHeight = newHeight;
          }
        }).exec();
      }, 0);
    }
  }
};
</script>

注意事项

  • 延迟计算：使用 setTimeout 确保内容渲染后再获取高度。
  • 最大高度限制：通过 Math.min 确保高度不超过设定值。
  • 样式绑定：使用 :style 动态绑定高度和最大高度，overflow: auto 允许内容超出时滚动。

优化建议

  • 如果内容高度变化频繁，可考虑防抖处理以减少计算次数。
  • 测试不同平台（如微信小程序、H5）的兼容性，确保 boundingClientRect 正常返回高度。

通过以上方法，即可实现 textarea 的自动高度调整并限制最大高度。

回到顶部