摘要：不管是在普通的H5页面还是在微信小程序中，底部输入框一直是一大难题，因为键盘会在某些情况下遮挡信输入框一部分！值得庆幸的是：在微信小程序中，我们可以通过监听bindfocus来获取键盘的高度，动态算出输入框距离屏幕顶部的距离......

一、需求

年前，公司的小程序中新增了一个用户评论的需求，效果图长这个样子。如图：小程序中有一个写评论的需求.png

二、黑暗和光明

搞过底部输入框的看官都知道，这玩意儿真的是太坑了！在普通的移动端H5页面中，想监听软键盘高度？想监听页面的resize变化？想法总是美好的，但实现起来，哼，别做梦了！特别是在苹果手机上，底部的输入框时不时会被系统软键盘遮挡！即使不被系统键盘挡住，在某些低版本的微信上，可能还会出现键盘不见了，输入框在半空中的尴尬场景（经测试跟css布局也有关系）！关键是，前端目前的解决方案也挺鸡肋的！比较幸运的是：微信小程序中提供了监听软键盘高度的bindfocus方法，这样一来，我们就离成功更进了一步。

下面，艺灵就为看官们复现上述的demo，最终演示的demo效果如图：演示demo在微信开发者工具中的效果.png当然了，如果只在微信开发者工具中截图是没有说服力的，必须要在苹果手机上跑代码才行。特意录制了一个小视频，戳下方图片即可播放。底部评论框在苹果6手机中的效果.mp4（友情提示：点击上面的图片即可播放视频）

怎么样，看上面的演示效果还不错吧！下面开始步入今天的主题，看官们准备好了吗？

三、手写demo

3.1、需求分析

写代码前需要做下需求分析，通过在项目中的使用场景来看，这个评论框会出现在多处。比如：资讯下面、名片下面、商品下面...... 所以，我们可以把评论框封装成一个通用的组件component，这样无论是修改还是调用都比较方便。

再进一步分析，默认展示的底部输入框在不同的地方样式不一样，但弹层中的输入框是一致的。所以，将弹层和输入框封装成一个组件是最好的选择。至于是资讯的评论还是商品的评论还是名片的评论，接口调用全在外层，组件内只管好自身，数据往外传即可。

好了，需求分析完毕，下面来看下我们的目录结构吧！

    
components /* 组件目录 */
    
  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、组件封装

刚刚已经把目录的结构定了，现在再来仔细的分析下这个弹层页面的交互吧。弹层页面的内容有：半透明背景层、输入框、提交按钮、字数这四样东西。wxss样式比较好实现但也有坑！最难搞的还是.js，下面继续分析下有哪些js事件。
bindfocus：输入框获取焦点，同时可监听软键盘高度；
bindblur：输入框失去焦点，用于关闭弹层；
bindinput：监听输入框，用于时时显示字数；
bindconfirm：监听键盘上的完成按钮（此demo中禁用完成按钮的显示）；
bindkeyboardheightchange：监听键盘高度发生变化（此demo中也未使用）
输入框相关的js事件就没有了，但并不表示以上事件就能满足需求！比如：点击半透明背景时需要关闭弹层，点击非输入框区域时也需要关闭弹层，还有滑动屏幕时也需要关闭弹层[:笑哭]。此时，我们还需要再添加两个js事件，分别是：
catchtap：绑定并阻止事件冒泡；
catchtouchmove：阻止穿透滚动；
现在基本上差不多了，但没有完。我们还需要检测用户使用的是安卓机还是苹果机，毕竟官方的textarea是有个巨坑的！参见2018年的一篇文章《 微信小程序从入坑到放弃之坑八：textarea在苹果手机中的大Bug》，由于文章写的比较早，不够详细，待明天再补发一篇。检测用户的机型可以使用 wx.getSystemInfo这个API，然后判断platform的值即可。 由于js代码比较多，此处就不一一粘贴了，完整的及注释都在源码里面，此处就略过。

接下来看下最终的wxml模板页面吧。

    
<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\}\}"> </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>
    

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

关于wxss样式，推荐fixed + 100vh（背景高度）+ absolute（评论框）的组合，具体的见在下面的源码。切记：最好不要使用wx:if 或 wx:show 或 visible 来控制弹层的显示与隐藏！！！也别问为哈，有兴趣的看官准备几个苹果手机，微信跨几个版本自行体验即可。保证把你坑哭到不要不要的！！！[:调皮]

组件说完了，再来说下如何调用。此处以首页pages/index为例。

3.3、调用组件

首先要修改pages/index/index.json配置文件，源码如下：

    
{
    
  "usingComponents": {
    
    "textareaFixedBottom": "/components/textarea-fixed-bottom/index"
    
  },
    
  "navigationBarTitleText": "底部评论框"
    
}
    

修改后，我们在/pages/index/index.wxml页面上调用textareaFixedBottom即可引入我们前面封装好的评论框组件，源码如下：

    
<!-- 固定在底部的输入框 start -->
    
<view class="commentContent" bindtap="handleIsShowComment">
    
  <view>写评论...</view>
    
</view>
    
<!-- 弹层评论框 start -->
    
<textareaFixedBottom info="\{\{popupEvaluation\}\}" bind:myeventEvaluationRelease="handleEvaluationRelease"
    bind:myeventEvaluationClose="handleEvaluationClose"></textareaFixedBottom>
    
<!-- 弹层评论框 end -->
    
<!-- 固定在底部的输入框 end -->
    

再写下/pages/index/index.wxss就有点样子了。源码如下：

    
/* 评论框 yiling 20200408 start */
    
.commentContent {
    
  position: fixed;
    
  bottom: 20rpx;
    
  left: 20rpx;
    
  right: 20rpx;
    
  font-size: 24rpx;
    
  border: 2rpx solid #f0f0f0;
    
  border-radius: 34rpx;
    
  padding: 20rpx;
    
  color: #999;
    
  line-height: 24rpx;
    
}
    
/* 评论框 yiling 20200408 end */
    

由于demo中不方便跟后端通信，所以此处在点击发表评论后，前端直接把数据展示在页面上。最终演示效果见视频：兼容苹果手机的评论框模拟发表评论.mp4（友情提示：点击上面的图片即可播放视频）

怎么样，是不是很赞？喜欢就点个star吧！

四、demo源码

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

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

五、最后

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

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

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