摘要：前面的文章已经多次提到底部评论框了，毕竟这个功能经常会在某些情况下被系统软键盘遮挡。艺灵也提供了相应的解决方案，但无奈客户的需求是多变的。之前的输入框都是固定了高度，今天来一篇自动增高的，毕竟这也是一个坑哦~

一、bug复现

还是之前提到的那个小姐姐，她要实现评论框自动增高的效果。她先用自己的方法“解决了”软键盘遮挡输入框的bug，但删除文字时这个bug又复现了！你说气不气人，详情见她录制的视频。 删除文字时输入框被软键盘遮挡了.mp4（友情提示：点击上面的图片即可播放视频）

怎么样，是不是很魔幻呀！[:偷笑]

二、解题思路

2.1、复用曾经封装的组件

由于之前的文章《微信小程序从入坑到放弃二十二：完美兼容安卓和ios手机的底部评论框》已经解决了输入框被遮挡的bug，所以我们直接拿代码进行简单的修改即可满足今天的需求。

2.2、核心点

如果看官仔细阅读过刚提到的文章源码就会发现有一个叫focusTop的变量，计算公式为：focusTop = 页面高度 - 输入框组件高度 - 软键盘高度。当输入框获取焦点或失去焦点时，动态设置focusTop的值来控制底部输入框的位置即可。草图如下：动态计算focusTop的值.png
既然现在的需求是输入框自动增高，那我们就要动态获取输入框组件的高度！

2.3、如何动态监听输入框的变化？

其实textarea组件中有一个bindlinechange属性，其释义为：“输入框行数变化时调用”。所以，我们只需要在此方法中动态设置focusTop值即可解决问题。

废话不多说，直接上源码了。

三、手写demo

3.1、项目目录

    
components /* 组件目录 */
    
  textarea-autoHeight /* 自动增高的输入框组件，大部分代码来自之前封装过的textarea-fixed-bottom组件 */
    
    index.js /* js文件，交互及逻辑都在这里（可以当成.js来理解） */
    
    index.json /* json文件，可配置标题、引用组件等 */
    
    index.wxml /* wxml模板文件，前台展示（可以当成.html来理解） */
    
    index.wxss /* wxss样式文件（可以当成.css来理解） */
    
pages /* pages目录 */
    
  index /* 首页目录 */
    
    index.js /* js文件 */
    
    index.json /* json文件 */
    
    index.wxml /* wxml模板文件 */
    
    index.wxss /* wxss样式文件 */
    

3.2、源码修改

3.2.1、wxss修改

wxss修改比较少，一共是两处：
1、删除高度；
2、添加一个伪元素。
具体变动代码如下：

    
... /* 未修改的省略 */
    
.popup-evaluation-wrap, .popup-evaluation-wrap::after { /* 此处添加一个伪元素 */
    
  ... /* 未修改的省略 */
    
}
    
.popup-evaluation-wrap::after { /* 防止多行删除时，底部瞬间出现空隙影响美观 */
    
  content: '';
    
  height: 50px;
    
  left: 0;
    
}
    
... /* 未修改的省略 */
    
.popup-evaluation__textatrea {
    
  background: #f5f5f5;
    
  width: initial; /* 宽度随父级，此处不要设置100% */
    
  /* height: 80px; */ /* 删除高度 */
    
  border-radius: 10rpx;
    
  padding: 16rpx;
    
  /* box-sizing: border-box; */ /* 高度自动时删除这行，否则在部分安卓机中布局异常！ */
    
}
    
... /* 未修改的省略 */
    

3.2.2、wxml修改

wxml的修改比较少，一共有两处：
1、删除height: \{\{ domHeight \}\}；
2、新增bindlinechange="bindlinechange" auto-height="\{\{ true \}\}"；
具体变动见下方黄色高亮处的代码。

    
<view class="popup-evaluation__bg \{\{info.isShow === true ? 'is__show' : ''\}\}" catchtap="handleClose" catchtouchmove="handleEvaluationtouchmove">
    
  <view class="popup-evaluation-wrap" catchtap="handleEvaluationCatchTap" style="top:\{\{focusTop\}\};height:\{\{domHeight\}\}">
    
    <view class="popup-evaluation__body">
    
      <textarea name="evaluation" class="popup-evaluation__textatrea \{\{platform === 'ios' ? 'textatrea_ios_bug' : ''\}\}" maxlength="\{\{maxLength\}\}" focus="\{\{info.isShow\}\}" bindfocus="handleEvaluationFocus"  bindinput="handleEvaluationInput" bindconfirm="handleEvaluationConfirm" bindblur="handleEvaluationBlur" show-confirm-bar="\{\{false\}\}" adjust-position="\{\{false\}\}" value="\{\{commentsText\}\}" fixed="\{\{true\}\}" bindlinechange="bindlinechange" auto-height="\{\{ true \}\}"> </textarea>
    
    </view>
    
    <view class="popup-evaluation__foot">
    
    <view class="popup-evaluation__length">\{\{commentsText.length\}\} / \{\{maxLength\}\}</view>
    
    <button class="popup-evaluation__button button_theme_primary" type="primary" bindtap="handleEvaluationRelease">发表评论</button>
    
    </view>
    
  </view>
    
</view>
    

友情提示：上面代码中的\反斜线是为了防止在文章中转码，看官复制后替换为空即可。

3.2.3、js修改

js修改就多了些，大致如下：
1、删除data中的domHeight并新增一个keyHeight: '', // 键盘高度；
2、在handleEvaluationFocus方法中为keyHeight赋值并调用this.calculateNewTop(height)这个方法；
3、新增bindlinechange方法，目的是监听行数变化并动态设置focusTop；
4、新增calculateNewTop方法，内容就是动态计算focusTop，方便多处调用。
具体的代码就不展示了，文章末尾的分支中有源码及注释。

3.3、效果演示

最终的效果见下方视频：删除文字时输入框不会被遮挡哈.mp4（友情提示：点击上面的图片即可播放视频）

四、demo源码

demo源码已上传到了github上的dev-textarea-autoHeight-20200620 分支中。如果看官需要研究源码，可以点击下面的链接进行访问并下载。

    
网址： 戳我前往github查看源码  
    

五、相关文章

目前为止，艺灵分享的有关评论框被软键盘遮挡的文章有：
scroll-view组件实现评论后页面滚动到最新评论的位置、
wx.pageScrollTo实现评论功能前滚动最最后一条评论的位置
完美兼容安卓和ios手机的底部评论框
看官可根据业务需求进行修改并使用到项目中。

六、最后

上述源码可直接用到实际项目中，若看官在使用过程中遇到问题或有不明白的地方，可与艺灵联系。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2020-06-20/weixin-textarea-autoHeight.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。