uni-app怎么实现类似微博的详情页底部评论输入框实时高度-uni-app-PHP中文网

auto-height仅在微信、支付宝、百度等小程序端原生生效，h5和app端无效，必须手动监听@input并用boundingclientrect动态计算高度，且需绑定max-height样式才有效。

uni-app怎么实现类似微博的详情页底部评论输入框实时高度

直接用 auto-height 属性就行，但仅限小程序端；H5 和 App 端必须手动计算高度，否则会出现闪动、撑开错位或 max-height 失效。

textarea auto-height 在哪些平台生效？

auto-height 是 uni-app 官方提供的原生属性，但它有明确的平台限制：

微信/支付宝/百度等小程序：✅ 原生支持，设了就自动撑高，无需 JS 干预
H5：❌ 完全不生效，auto-height 被忽略，必须自己监听 @input + createSelectorQuery
App（iOS/Android）：❌ 同样无效，即使写了也当没写，强行依赖会导致 H5 和 App 表现不一致

别被文档里“支持所有平台”的模糊描述误导——实际运行时，只有小程序真能靠它跑通。跨端项目必须按平台分路径处理。

为什么用 offsetHeight 或 clientHeight 计算会不准？

因为 textarea 渲染后的真实视觉高度 ≠ DOM 元素的 offsetHeight，尤其在设置了 padding、border、字体缩放或行高之后，浏览器计算逻辑和 uni-app 的渲染层存在偏差。

正确做法是用 boundingClientRect 获取渲染后的实际尺寸：

必须加 .in(this) 绑定组件作用域，否则查不到节点
不能在 @input 回调里立刻查——内容刚更新，DOM 还没重绘，要加 setTimeout(() => {}, 0) 或 nextTick
返回的 data.height 是含 padding 的真实像素值，可直接赋给 :style="{ height: data.height + 'px' }"

示例关键片段：

onInput() {
  setTimeout(() => {
    uni.createSelectorQuery()
      .in(this)
      .select('textarea')
      .boundingClientRect(res => {
        if (res) this.textareaHeight = Math.max(40, res.height);
      })
      .exec();
  }, 0);
}