fix(ns-form): 修复微信小程序textarea显示和滚动问题

针对微信小程序原生textarea,改用固定高度176rpx替代auto-height,解决无限扩展遮挡组件的问题,同时优化滚动条拇指比例,提升交互体验
This commit is contained in:
2026-08-05 11:01:04 +08:00
parent d4326bc827
commit 157a7b4e16

View File

@@ -37,6 +37,19 @@
></textarea>
<!-- #endif -->
<!-- #ifndef MP-HARMONY -->
<!-- #ifdef MP-WEIXIN -->
<!-- 微信小程序原生 textarea:
不用 auto-height(会随内容无限扩展遮挡后续组件),改用 textareaStyle 中
固定 height 176rpx(约 4 行)+ line-height 44rpx,可视区域比原 88rpx 翻倍,
内容多时内部滚动条 thumb 比例改善一倍,且高度可控。 -->
<textarea
:placeholder="item.value.placeholder"
placeholder-class="placeholder color-tip"
v-model="item.val"
:style="textareaStyle"
></textarea>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<textarea
:placeholder="item.value.placeholder"
placeholder-class="placeholder color-tip"
@@ -44,6 +57,7 @@
:style="inputStyle"
></textarea>
<!-- #endif -->
<!-- #endif -->
</view>
</view>
</view>
@@ -420,6 +434,26 @@
'line-height': this.$util.rpx(this.config.inputHeight)
});
},
// textarea 专用 inline style(仅微信小程序端使用,见 template 中 #ifdef MP-WEIXIN 分支)
// 设计要点:
// 1) 不复用 inputStyle 的 min-height / line-height:这两个值取自 inputHeight(默认 60rpx),
// 对 textarea 太小,会让微信小程序原生 textarea 单行过高、可视区域过小,
// 内容稍多即溢出导致原生滚动条 thumb 异常小;
// 2) 不使用 auto-height:在微信小程序原生 textarea 上,auto-height 会让 textarea 随内容
// 无限扩展,遮挡后续组件,导致"看不到下面的其他组件";
// 3) 改用固定 height 176rpx(约 4 行,line-height 44rpx),相比原 CSS height: 88rpx(2 行)
// 可视区域翻倍,内容多时内部滚动条 thumb 比例改善一倍,且高度可控不会遮挡后续组件。
textareaStyle() {
const h = this.$util.rpx(176);
return this.$util.objToStyle({
'height': h,
'min-height': h,
'line-height': this.$util.rpx(44),
'border-radius': this.$util.rpx(this.config.inputRadius),
'font-size': this.$util.rpx(this.config.labelFontSize),
'color': this.config.labelColor
});
},
// 必填星号颜色
requiredColor() {
return this.config.requiredColor;