uni-app微信小程序textarea组件错位bug

uni-app微信小程序textarea组件错位bug

代码

<textarea v-model="attr.value" auto-height class="input" placeholder="请输入" />

显示的样子

image

2 回复

只是部分手机会出现这种情况，大部分是正常的，有大佬知道是什么原因吗？

更多关于uni-app微信小程序textarea组件错位bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的微信小程序textarea组件在uni-app中的样式错位问题。主要原因是微信小程序原生textarea组件的默认样式与uni-app的样式系统不完全兼容。

解决方法：

  1. 添加基础样式重置：
.input {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
}
  1. 如果仍有错位，可以尝试添加以下样式：
.input {
  box-sizing: border-box;
  min-height: 40px; /* 设置最小高度 */
  line-height: 1.4; /* 调整行高 */
}
  1. 对于auto-height属性，建议明确设置初始高度：
<textarea v-model="attr.value" auto-height class="input" placeholder="请输入" :style="{height: '40px'}" />
  1. 如果问题仍然存在，可以尝试使用条件编译针对微信小程序单独处理样式：
/* #ifdef MP-WEIXIN */
.input {
  /* 微信小程序专用样式 */
}
/* #endif */
回到顶部