微信小程序 van-field 调整高度

1  简介

　　在写表单的时候，下载外面写了一个view来展示一个输入框，然后在下面添加了<van-field>文本框，

　　但是去点击的时候，发现点击蓝色框住的部分是没有反应的，只有上面一块可以点击输入

　　猜想是<van-field>的默认高度就那么一点

<view class="search-textarea st">
        <van-field
              maxlength="100"
              autosize="true"
              value="{{ formdata.applyReasonDetail }}"
              bind:change="applyReasonDetailChange"
              type="textarea"
              placeholder=""
              border="{{ false }}"
          />
    </view>

 

　

 

2 处理

　　查询文档，输入框可以设置样式

　　

　　于是，在van-field标签添加input-class="fieldarea"，并设置样式

<view class="search-textarea st">
        <van-field
              maxlength="100"
              autosize="true"
              value="{{ formdata.applyReasonDetail }}"
              bind:change="applyReasonDetailChange"
              type="textarea"
              placeholder=""
              border="{{ false }}"
              input-class="fieldarea"
          />
    </view>

　　发现下面这个元素不对

.fieldarea {
  height: 100% ; /* 使 van-field 组件撑满容器 */
}

　　于是修改成下面样式，生效

.fieldarea {
  min-height: 170rpx !important

; /* 使 van-field 组件撑满容器 */
}